WordPressサイトをBootstrapで再構築する

WordPressによって作られた本サイトArcanyを、Bootstrapで再構築することにしました。しかし、困難の連続が…

Bootstrapでモックアップを作成する

まず、Bootstrap本家のサイトより、CSS、javascript、fontのデータをダウンロードします。
そしてトップページのレイアウトを行いました。モジュールを配置して、ロゴ、メニュー、カルーセル、サイドコンテンツ(最新の記事)、飛び上がるアイコン、フッタをレイアウトして基本的な構造を作りました。

既存のデザインを元に作成したため、2時間もかかりませんでした。しかし問題が…

ブレークポイントが広すぎる

Bootstrapにはブレークポイントとして、スマートフォン向けのxs、タブレット端末向けのsm、大画面タブレットやPC向けのmd、広い画面向けのlgが用意されています。その切り替わるポイントが広すぎると感じました。

早速Bootstrapのカスタマイズを行いました。BootstrapサイトのCustomize and downloadページでブレークポイントの値を変更し、一番下の「Download」をクリックして、カスタマイズされたBootstrapをダウンロードして実装します。

サイズ デフォルト カスタマイズ
xs 〜767px 〜600px
sm 768px〜991px 600px〜768px
md 992px〜1199px 768px〜991px
lg 1200px〜 991px〜

画像の比率がバラバラだとカルーセルがうまく機能しない

Bootstrapのカルーセルは、どんなスペースでもバランス良く収まります。ところが、全ての画像で比率が合っていないと、縦位置の画像が表示される時だけカルーセルが縦長に変化してしまい、正しく動作しません。

Responsive embedを使って枠の大きさを強制的に4:3にすることができますが、縦位置の画像が中央でトリミングされてしまいます。

これを解消するためには、jQueryで各画像のサイズと位置を強制的に書き換えて対応しました。これで縦横の比率が合っていない画像も長い方の辺がボックスに対して100%で配置され、画像が中央に配置されました。

ブログ一覧のページをレイアウト

メディアオブジェクトを活用

ブログ一覧のページは、メディアオブジェクトのモジュールを活用し、サムネールを左、カテゴリー一覧と要約を右側に配置しました。
スマートフォンではサムネールと要約の間に<div class=”clearfix visible-xs”></div>を挿入し、「xsサイズの時に有効なクリアフィックス」を挿入して、サムネールと要約を上下に配置しています。

ページネーション

これもBootstrapに用意されたものを使いました。

カテゴリータブ

a要素をボタンの形状にするクラス.btnがありますので、それを使いました。ただしa要素のテキストの色がBootstrapで定義されていたため、別のスタイルを定義して白に書き換えました。

右側のカテゴリーリストは、マウスカーソルを乗せるとカテゴリーの説明が吹き出しで表示される仕組みを導入しました。これもBootstrapで用意された機能です。

写真一覧

Bootstrapの「サムネイル」のモジュールを使用しています。スマートフォンの画面では一行に2つ、それより大きな画面では1行に3つ表示させることにし、1行の末尾に画面の大きさによって有効・無効になるクリアフィックスを書き出しています。

各個記事

Bootstrapの基本スタイルに、4月に作ったデザインを割り当てました。デザインに殆ど時間がかかっていません。
コメント欄には、Bootstrapで用意されているグリッドデザインを組み込みました。

お問い合わせフォーム

各個記事のコメント欄同様、Bootstrapのグリッドデザインを採用しました。

テンプレートを作成する

いよいよテンプレートになるphpファイルを作成します。出力する画像、最新記事一覧、アーカイブ、記事などには変更がないため、前のバージョンのphpファイルで出力を司るphpの記載を流用できました。

gitを使ってバージョン管理

ここからgitを使用しました。Gitのリモートリポジトリにプッシュすると自動的にWebサイトが更新されるリポジトリを作成するの方法で、バージョン管理とデプロイの自動化の仕組みを導入しました。作成中はコミットだけを行い、本番サーバーへ公開する時にプッシュします。

現在のページが属するカテゴリーのタブにactiveのクラスを追加できない

<?php wp_nav_menu(array(
	'theme_location' => 'sidebar',
	'menu_class' => 'nav nav-tabs js-tabs',
	'container' => 'none'
)); ?>

wp_nav_menuでグローバルナビゲーションを出力できますが、表示中のページがどのカテゴリーに属していて、そのカテゴリーに対応するタブにactiveのクラスを追加することができません。

また、固定ページでは対応するタブに「current_page_item」というクラスが付与されています。これをactiveに変更することはできません。

そこで、フィルターフックを用いて、選択中のカテゴリーのタブにクラス「current_page_item」を付与する関数を作りました。
また、Bootstrapで作ったcssを変更しています。「.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus」のactiveを、current_page_itemに書き換えました。

この方法では、Bootstrapをカスタマイズする度に書き換えなければならないので、不便です。

ブログに貼り付けた画像が枠から右にはみ出る

ブログや写真の記事に配置した画像のボックスが、右にはみ出てしまい、レイアウトが崩れてしまう不具合に見舞われました。
要素を調べてみると、勝手に挿入されたdiv要素があり、そこに横幅が固定されるように設定されていました。

<div id="attachment_609" style="width: 610px" class="wp-caption aligncenter">
<a href="https://tapioca-hiroyuki.net/wp-content/uploads/2015/10/PA040376.jpg" rel="lightbox" data-rel="attachment-gallery-YXR0YWNobWVudC1nYWxsZXJ5LUpNalI=" title="OLYMPUS DIGITAL CAMERA" title="OLYMPUS DIGITAL CAMERA">
<img class="wp-image-609 size-large" src="https://tapioca-hiroyuki.net/wp-content/uploads/2015/10/PA040376-600x450.jpg" alt="" width="600" height="450" srcset="https://tapioca-hiroyuki.net/wp-content/uploads/2015/10/PA040376-600x450.jpg 600w, https://tapioca-hiroyuki.net/wp-content/uploads/2015/10/PA040376-300x225.jpg 300w, https://tapioca-hiroyuki.net/wp-content/uploads/2015/10/PA040376-1024x768.jpg 1024w, https://tapioca-hiroyuki.net/wp-content/uploads/2015/10/PA040376-960x720.jpg 960w, https://tapioca-hiroyuki.net/wp-content/uploads/2015/10/PA040376-160x120.jpg 160w, https://tapioca-hiroyuki.net/wp-content/uploads/2015/10/PA040376.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<p class="wp-caption-text">
<span style="display:block; color:#888; font-size:small; font-weight:normal;">OLYMPUS IMAGING CORP.   E-M5MarkII (45mm, f/8, 1/30 sec, ISO1600)<br>
</span> OLYMPUS DIGITAL CAMERA</p></div>

div.wp-captionに、width: 100% !important;を適用して、レスポンシブになるようにしました。

コメント出力が鬼門

コメント一覧に、メディアリストを使用しようと思いましたが、PHPから吐き出されるコードがBootstrapに適した形ではありません。要素の構造を変えない限り、Bootstrapのモジュールになりません。
classにmediaを追加し、メディアリストっぽくなるようにしました。あとはCSSを使ってアレンジをするしかありません。

comment.phpが吐き出すコメントリストの一部
<?php if(have_comments()): ?>
<ul class="commets-list list-unstyled media-list">
<?php $com = wp_list_comments(array( 'echo'=>false , 'style' => 'li' ));
$com = preg_replace ('/<li class="comment/' , '<li class="media comment', $com); // li要素をメディアオブジェクトへ変換する
echo $com; ?>
</ul>
<?php endif; ?>

コメント入力フォームを出力する部分(comment_form)はカスタマイズの自由度が高く、Bootstrapに適したコードを吐き出すように調整ができました。

<?php $args = array(
		'title_reply' => '送信フォーム',
		'label_submit' => 'コメントをおくる',
		'comment_notes_before' => '<p class="commentNotesBefore">入力エリアすべてが必須項目です。</p>',
		'comment_notes_after'  => '<p class="commentNotesAfter">内容をご確認の上、送信してください。</p>',
		'fields' => array(
				'author' => '<div class="form-group"><label class="comment-form-author col-xs-12 col-sm-3 control-label" for="author">おなまえ</label>' .
							'<input id="author" class="col-sm-9 col-xs-12" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder="*おなまえ" /></div>',
				'email'  => '<div class="form-group"><label class="comment-form-email col-sm-3 col-xs-12 control-label" for="email">メールアドレス</label>' .	'<input id="email" class="col-sm-9 col-xs-12" name="email"' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . 'placeholder="*めーるあどれす" /><p class="help-block col-sm-offset-3 col-sm-9 col-xs-12">※メールアドレスは公開されません</p></div>',
				'url'    => '',
				),
		'comment_field' => '<div class="form-group"><label class="comment-form-comment col-sm-3  col-xs-12 control-label" for="comment">コメント本文</label>' . '<textarea id="comment" class="col-sm-9 col-xs-12" name="comment" rows="6" aria-required="true"' . $aria_req . ' placeholder="*こめんと"></textarea></div>',
		'class_submit' => 'btn btn-primary'
		);

comment_form( $args ); ?>

お問い合わせフォーム

これはBootstrapとは関係ないのですが、いままで既製のcgiを使ってメールを書き出していましたが、今回はPHPによるメール送信に切り替えました。
メール送信内容が「お問い合わせ」か、「選考結果のお知らせ」の2種類で送信するメールのタイトル、内容が変化するため、PHPによるスクリプトを組んでメールを送信させることができました。

公開!

そして5月5日朝にようやく公開に至りました。1週間以上かかりましたが、Bootstrapを使い、WordPressのサイトを構築するための良い経験になりました。
BootstrapとWordPressとの組み合わせでサイトを構築する仕事は多いらしいので、将来受注する時にこのサイトを使って営業活動ができるのではないかと思います。


コメント

送信フォーム

入力エリアすべてが必須項目です。

内容をご確認の上、送信してください。

※メールアドレスは公開されません