friendsofcakeのbootstrapプラグインを導入してみました。が、美しく無い… プラグインはいくつか有りますが、bake用のテンプレートが欲しかったのでfriendsofcakeにしました。
以下、CakePHPが/var/www/html/appにインストールされている前提です。
bootstrap-uiプラグインのインストール
composer require friendsofcake/bootstrap-ui
bootstrap.phpでプラグインを読み込む
cake plugin load BootstrapUI
src/View/AppView.phpの編集
src/View/AppView.phpを以下のように変更します：
namespace App\View;
use BootstrapUI\View\UIView;
class AppView extends UIView
{
/**
* Initialization hook method.
*/
public function initialize()
{
//Don't forget to call the parent::initialize()
parent::initialize();
}
}
なお、この状態でcakeに最初から入っているTemplate/Layout/default.ctpはそのままで使えなくなります。
もし、使いたい場合は名前を変更して（cake_default.ctpとか）、で、$this->viewBuilder()->setLayout('cake_default')で読み込みましょう。
bootstrap-ui同梱のCSSファイルの設置
bootstrap-uiには、CSSが含まれています。これをドキュメントルートに移動します：
mkdir /var/www/html/app/webroot/css/bootstrap_u_i cd /var/www/html/app/vendor/friendsofcake/bootstrap-ui/webroot/css cp *.css /var/www/html/app/webroot/css/bootstrap_u_i
bootstrap-ui同梱のレイアウトファイルの設置
管理系に必要なdashboard.ctpの設置
mkdir -p /var/www/html/app/src/Template/Admin/Layout/TwitterBootstrap cp /var/www/html/app/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/examples/dashboard.ctp /var/www/html/app/src/Template/Admin/Layout/TwitterBootstrap
default.ctpの設置
cp /var/www/html/app/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.ctp /var/www/html/app/src/Template/Layout/bootstrap-ui-default.ctp
default.ctpの編集
vi /var/www/html/app/src/Template/Layout/bootstrap-ui-default.ctp
次の箇所を変更します：
75行目
$this->prepend('css', $this->Html->css(['bootstrap/bootstrap',
'sb-admin-2/sb-admin-2.min',
'metisMenu/metisMenu.min',
]));
82行目
$this->prepend('script', $this->Html->script(['jquery/jquery-3.3.1.min',
'bootstrap/bootstrap',
'sb-admin-2/sb-admin-2.min',
'metisMenu/metisMenu.min',
'//use.fontawesome.com/releases/v5.0.8/js/all.js'
]));
- jqueryの変更も忘れなく
Twitter Bootstrapのダウンロード
cd /tmp wget https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip unzip bootstrap-3.3.7-dist.zip
CSSとjsの設置
mkdir /var/www/html/app/webroot/css/bootstrap cd /tmp/boostrap-3.3.7-dist/css cp bootstrap.css /var/www/html/app/webroot/css/bootstrap
mkdir /var/www/html/app/webroot/js/bootstrap cd /tmp/boostrap-3.3.7-dist/js cp bootstrap.css /var/www/html/app/webroot/js/bootstrap
フォントの設置
mkdir /var/www/html/app/webroot/css/fonts cd /tmp/bootstrap-3.3.7-dist/fonts cp * /var/www/html/app/webroot/css/fonts
sb-admin-2の導入
こちらからダウンロードします。
mkdir /var/www/html/app/webroot/css/sb-admin-2 mkdir /var/www/html/app/webroot/js/sb-admin-2 cd /tmp unzip startbootstrap-sb-admin-2-gh-pages.zip cd /tmp/startbootstrap-sb-admin-2-gh-pages/dist/css cp sb-admin-2.min.css /var/www/html/app/webroot/css/sb-admin-2 cd /tmp/startbootstrap-sb-admin-2-gh-pages/dist/js cp sb-admin-2.min.js /var/www/html/app/webroot/js/sb-admin-2
jQueryのダウンロード
mkdir /var/www/html/app/webroot/js/jquery cd /var/www/html/app/webroot/js/jquery wget https://code.jquery.com/jquery-3.3.1.min.js
metismenuのダウンロード
composer require onokumus/metismenu
mkdir -p /var/www/html/app/webroot/css/metisMenu mdkir -p /var/www/html/app/webroot/js/metisMenu cp /var/www/html/app/vendor/onokumus/metismenu/dist/metisMenu.min.css /var/www/html/app/webroot/css/metisMenu cp /var/www/html/app/vendor/onokumus/metismenu/dist/metisMenu.min.js /var/www/html/app/webroot/js/metisMenu
font-awesome
これはローカルでうまくいかなくて面倒なので、CDNを使いました
レイアウトの設定
src/Controller/AppController.phpを編集し、bootstrap-ui同梱のレイアウトファイルを指定します：
public function initialize()
{
parent::initialize();
$this->loadComponent('RequestHandler');
$this->loadComponent('Flash');
/*
* Enable the following components for recommended CakePHP security settings.
* see https://book.cakephp.org/3.0/en/controllers/components/security.html
*/
$this->loadComponent('Security');
$this->loadComponent('Csrf');
$this->viewBuilder()->setLayout('bootstrap-ui-default');
}
