てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

cakePHP 3 を 直接 触って 覚えてみることにした No.3

前回のままだと cakePHP の 標準のデザインですので 管理画面用の デザインに変更します

というわけで 僕の 大好きな Bootstrap を 用いて コーディング していきます

まだ alpha.6 ですが こちらを 使いたいと思います

Bootstrap 4
https://v4-alpha.getbootstrap.com/

Bootstrap 4 に 必要な jQuery と tether は 以下から ダウンロード できます

Download jQuery
http://jquery.com/download/
tether
https://github.com/HubSpot/tether/releases

webroot

上記 URL で ダウンロード した ファイル を
CSS ファイル は /plugins/Admin/webroot/css/ に
JS ファイル は /plugins/Admin/webroot/js/ に それぞれ 入れていきます

ファイル名は 任意に変えても問題ないです

レイアウト指定

Admin 以下を 指定のレイアウト に変更します

というわけで /plugins/Admin/src/Controller/AppController.php に 追記します

namespace Admin\Controller;

use App\Controller\AppController as BaseController;
// ここから追加
use Cake\Event\Event;
//ここまで追加

class AppController extends BaseController
{
// ここから追加
    public function beforeFilter( Event $event )
    {
        $this->viewBuilder()->layout( 'Admin.admin' );
    }
//ここまで追加
}

レイアウト作成

レイアウト を 指定しただけでは ファイルがないので エラーページになります

plugins/Admin/src/Template/Layout/admin.ctp に ファイルを 作成し レイアウト を 作成します

<!DOCTYPE html>
<html lang="ja">
<head>

  <meta name='robots' content='noindex,follow'>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no,address=no,email=no">

  <?= $this->Html->css( 'Admin.bootstrap.min' ).PHP_EOL ?>
  <?= $this->Html->css( 'Admin.bootstrap.diff' ).PHP_EOL ?>
  <?= $this->Html->css( 'Admin.admin' ).PHP_EOL ?>

  <title><?= $title_for_layout ?></title>

</head>

<body>

<nav class="fixed-top navbar-inverse bg-inverse" role="navigation">
  <div class="navbar navbar-toggleable-md">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNavigation" aria-controls="mainNavigation" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <?php echo $this->Html->link( '管理ページ', [ 'controller' => '/' ], [ 'class' => 'navbar-brand' ] ); ?>
    <div class="collapse navbar-collapse" id="mainNavigation">
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">設定</a>
          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <li><?php echo $this->Html->link( 'ユーザ一覧', [ 'controller' => 'users', 'action' => 'index' ], [ 'class' => 'dropdown-item' ] ); ?></li>
            <li><?php echo $this->Html->link( 'ユーザの追加', [ 'controller' => 'users', 'action' => 'add' ], [ 'class' => 'dropdown-item' ] ); ?></li>
            <li class="dropdown-divider"></li>
            <li><?php echo $this->Html->link( 'ログアウト', [ 'controller' => 'users', 'action' => 'logout' ], [ 'class' => 'dropdown-item' ] ); ?></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<?= $this->fetch( 'content' ) ?>

</body>

<?= $this->Html->script( 'Admin.jquery.min' ).PHP_EOL ?>
<?= $this->Html->script( 'Admin.tether.min' ).PHP_EOL ?>
<?= $this->Html->script( 'Admin.bootstrap.min' ).PHP_EOL ?>

</html>

front_page.ctp

最後に あまり良くない方法かもしれませんが plugins/Admin/src/Template/Pages/front_page.ctp に タイトル の 設定をします

<?php
  $title_for_layout = 'Dashboard';
  $this->set( 'title_for_layout', $title_for_layout );
?>

これで ページにアクセスしたとき タイトルが 正しく反映されるかと思います

また デザインも Bootstrap の デザインになっているかと思います

手探りで 勉強しているので 間違っていたら ご指摘いただけると助かります!!

Related Article

ポストメタ が 肥大化して 管理ページが 遅くなっていた…

詳細へ »

jQuery を 使って WP REST API v2 から 記事を 取得して 表示する (サムネイル対応)

詳細へ »