understrapことはじめ③ – phpやウィジェットでカスタマイズ

前回の記事では基本的にcssだけを触って調整しました。
（といいつつ、サイドメニュー消したりfooterのcopyrightを変更したりもしていますが）

understrapことはじめ② | cssで子テーマをカスタマイズするには

前回の記事ではbootrstrapの子テーマを反映させるとこまでやりました（Blog始めたばかりで慣れてなく、細切れにし過ぎてました。反省……）。今回は子テーマ反映後の作業になります。前置きunderstrapは基本的にscssで開発していくテーマのようですが、私はまだscssまで勉強できていないのです。そのため、今回はcssで作業を進めたいと思います。さらに前置き私のブログではunderstrapの解説は初級〜中級の内容なので、検索でこのページにいらした方には物足りない内容の可能性があります。その場合は、下記サイトで中級〜上級レベルの解...

ここから各テンプレートphpファイルを修正したり、プラグイン・ウィジェットを利用してカスタマイズを進めます。

ところで、このunderstrapではFont Awesome v4.7がデフォルトで使用できます。以下の記事でFont Awesome v4.7の使い方をまとめてます。

Font Awesomeの使い方① | Bootstrap4でFont Awesome v4.7を使用する

使えるようになるまでにちょっと敷居が高いけど、使えるようになるともう手放せないWebアイコンフォント。その代表格といえばFont Awesome!（「オゥサム」と読みます。素晴らしい！最高！って意味）使えるようになったつもりでも、次の案件でまた使えなくなって豆腐（□）が表示されることを繰り返してるので、ここらで復習します。第一回目は「Bootstrap4でFont Awesome v4.7を使用する」です。Font AwesomeとはWebアイコンフォント最大手。一部有料だが無料版でも十分使える。SVGもダウンロードできるので、WEBデザインで使うのも楽ち...

ざっくりビフォーアフター

このサイトのTOPページはブログ型表示です。
ブログ型表示サイトの場合は、テンプレートphpファイルとcssとプラグイン・ウィジェットをいじれば、大体完成までたどり着けると思います。

以下、TOPページのビフォーアフターのキャプチャです。

Before

After

調整した箇所と、そのために触ったところの基本的な情報になりますが覚書です。

テンプレートphpファイルを編集する

テーマによって触るところが違うので混乱しますが、ここではunderstrapのカスタマイズで触るphpファイルをざっくり説明します。
編集する場合は、親テーマのunderstrapから該当phpファイルを子テーマフォルダへ複製してきて作業します。

親テーマunderstrap内には変更をかけない。

カスタマイズメモ

共通項目を変更する

グローバルナビを作成する

「ダッシュボード」＞「外観」＞「メニュー」から作成（変更）できます。

「メニュー構造」で表示させたい項目を選び名前を付けて保存をします。
メニューが保存（作成）されると上に「位置を管理」というタブができますので、そのタブ内で「メインメニュー」（グローバルナビのこと）に先ほど作成したメニューをセレクトして保存をすると反映されます。

ロゴを設置することも考えると、understrapを選択するような人なら素直にheader.phpを触って、ガシガシコードを書いちゃった方が早いかもしれません。

サイドメニューを表示させない

サイト内で一切サイドメニューを使わないのであれば、「ダッシュボード」＞「外観」＞「カスタマイズ」＞「テーマレイアウト設定」の「サイドバーの位置」で「サイドバーなし」を選択し、上の「公開」ボタンをクリックでで全てのページに反映されます。

テンプレートphpを触る方法もあります。一覧ページならindex.php、カテゴリー一覧ページはarchive.php、記事詳細ページならsingle.phpを親テーマから子テーマにコピペで持ってきて、サイドメニューを差し込むコードを削除し保存、アップロードします。

記事一覧のループ部分のデザインを変更する

記事のループ部分の変更は、loop-templates > content.phpを修正します。やはり親テーマから子テーマにコピペで持ってきて作業します。loop-templatesフォルダを作って階層を合わせるのも忘れずに。

このphpでarticleで囲われている部分が一記事に該当します。
Before時点でサムネイル画像を登録していなかったので分かりずらいのですが、デフォルトでサムネイル画像が表示されますので、タイトルの上に持ってくる、記事ページへリンクを貼るなど編集できます。

上記の画像での投稿日、投稿者、カテゴリー、タグ、「続きを読む」ボタン等はまた別のphpファイル（/inc/内にいろいろ入ってます）で編集することもできますし、
<?php understrap_posted_on(); ?>
<?php understrap_entry_footer(); ?>
を削除して、表示させたい情報のテンプレートタグを書き込んで編集することもできます。

ページネーション（ページ送り）をカスタマイズする

<?php understrap_pagination(); ?>

最初の段階でindex.phpやarchive.phpに記述されている上記のphpタグはデフォルトのBootstrapのページネーションを呼び出すので、このままの状態でカスタマイズしたい場合は任意のclassを付けた親要素で囲んで、CSSで調整します。

「前へ」「次へ」といった文言に変更したい場合は、そもそものHTMLの記述を変更する必要があるので、
方法その1：上記のphpタグを読み込みさせず削除し、代わりにBootstrapのコンポーネントを該当位置に配置する。

ページ送り～Bootstrap4移行ガイド

一連の関連コンテンツが複数のページにまたがって存在することを示すためのページを表示するための解説と例。

方法その2：親テーマのunderstrapの中の/inc/pagination.phpを子テーマに持ってきて、編集する。
この場合サイト内のページネーションを一括で編集できるので、メンテナンス性が高いです。

footerのコピーライトを修正する

footer.phpを修正します。
単純にコピーライトのみにしたいなら、footer.php内の

<div class="site-info">
  <?php understrap_site_info(); ?>
</div><!-- .site-info -->

を、

<div class="site-info">
  © （任意のサイト名か団体名）
</div><!-- .site-info -->

に書き替えて上書きアップします。

初心者でやりがちなのですが、いらないと思ってfooter.phpの閉じbodyタグ直前にある<?php wp_footer(); ?>を消してしまうと、必要な参照が行われず表示崩れを起こしてしまいます。絶対消しちゃ駄目です。

投稿記事の日付のフォーマットを変えたい

ダッシュボードの「設定」の「一般」から変更できます。
記号の意味は、Yが年、nが一桁表記の月（一月なら1）、mが二桁表記の月（一月なら01）、jが一桁表記の日（一日なら1）、d二桁表記の日（一日なら01）です。

追記201212：understrapがバージョンアップしたせいか、デフォルトの投稿日表示で「投稿日: %s 2020-04-16」というように変な記号が混じるようになりました。素直に以下の記事で触れているようなWordPressのテンプレートタグを使用した方が良さそうです。

WordPressマスターへの遥かなる旅路① – テンプレートタグのおさらい

WordPressを使った案件を丸ごと一件任されるようになってきつつも、テンプレートタグはまだ毎回ググっては恐る恐る使ってみる日々。ここいらでちゃんとまとめて覚えるぞ！と、そんな記事です。テンプレートタグとは本家によると、テンプレートタグは、ブログのデータを動的に表示したり、個性的で面白いブログにカスタマイズしたりするときに、テンプレートの中で使います。テンプレートタグ - WordPress Codex 日本語版WordPress自体が用意した関数で、投稿記事のタイトルや投稿日、カテゴリー、本文など呼び出してページに表示してく...

TOPページのデザインを変更する

understrapのデフォルトではindex.phpのmainタグの内側に投稿記事をループさせています。
この記事ではブログ型表示前提で話を進めます。

記事のループを2カラムにしたい

understrapはBootstrap使用のテーマなので、
TOPページの”ガワ”の部分であるindex.phpのmainタグにclassrowを付加、
記事のループ部分であるcontent.phpの方は、

<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

のpost_class();のカッコの中に追加したいclasscol-md-6をシングルコーテーションで囲んで入れます。

<article <?php post_class('col-md-6'); ?> id="post-<?php the_ID(); ?>">

とすることで、さっと2カラムになります。

Before

After

cardタイプにしたい、Flexboxを使って高さを合わせたいなども、この調子で編集していきます。
また、文字の大きさやマージンはCSSでざくざく調整していきます。

Jumbotron（MV）を表示したい

「ダッシュボード」＞「外観」＞「ウィジェット」からも編集できるのですが、understrapを選ぶような人はphpファイルを触って作業する方がスムーズかと思います。
なので、index.phpに追記しちゃいましょう。

サイドメニューの項目を変える

「ダッシュボード」＞「外観」＞「ウィジェット」から変更できます。

ウィジェットが嫌いな方や、カスタムHTMLに記述できないコードを挿入したい方は、sidebar-templates > sidebar-right.phpを直接編集しても変更できます。

TOPページ以外のカスタマイズ

カテゴリー一覧ページをTOPページのデザインに合わせたい

index.phpを参考に、archive.phpを調整します。

固定ページのテンプレートphpにショートコードを貼ったらそのまんま表示された

投稿ページ等、wordpressのダッシュボード内の投稿・編集画面で貼るとちゃんと動いてくれるコードですが、固定ページのデザインテンプレートに当てているphp内で貼ってもコードが実行されません。
その場合

<?php echo do_shortcode('[ショートコード]'); ?>

プラグイン・ウィジェット

ざーっと書いていきます。下記記事で使ってるプラグインをまとめています。

個人的WordPressプラグイン使用記録

案件でWordPressのプラグインを使用したらメモしていく自分用まとめ記事。SEO対策All in One SEO Pack必須。セキュリティ対策SiteGuardログインページをデフォルトの/wp-admin/じゃなくしたい、ログインがあったらメールでお知らせさせたい、spamロボットによるログインのトライをはねのけたい場合などに。友人のWPでspamロボットに荒される被害を目の当たりにしてからは必ず使用しています（ログインIDとパスワードも複雑化したのに「忘れた」と再び簡単なものに戻されたけれども。何のためのセキュリティ対策だったのか……）。バック...

SEO対策をしたい

王道の「All In One SEO Pack」を導入。まだ使いこなせてませんが。。

セキュリティ対策をしたい

デフォルトのログインURLでは入り口の場所が分かりやすいため、いたずら目的のbotなどに侵入され荒される危険性があります。
「SiteGuard WP Plugin」はログインURLをカスタマイズし、ログイン時の文字認証を追加したりもできます。簡単ですが、しないよりは断然マシ。

パンくずを設置したい

「Breadcrumb NavXT」をインストール＆有効化。「設定」→「Breadcrumb NavXT」から吐き出すソースの調整など色々設定できる。

投稿ページに配置する場合、single.phpに

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
  <?php if(function_exists('bcn_display'))
  {
   bcn_display();
  }?>
</div>

を追記しました。

タグクラウドの文字の大きさを揃える

「Simple Tags」でタグを吐き出し、CSSで大きさを統一させています。

投稿記事に目次を付けたい

ここでは「Easy Table of Contents」をセレクトしました。見出し（H1, H2,H3…）が増えると自動的に目次を作成してくれます。

サイドメニューを見栄え良くしたい

シンプルなリストではなくサムネイル画像も付けたい→「Recent Posts Widget Extended」、タグのデザインを変えたい→「Simple Tags」といったプラグインを併用し、CSSで調整します。

お問い合わせフォームを設置したい

簡単に設定したいなら「Contact Form 7」、送信後のページも用意したいなら「MW MW Form」。

パーマリンクを.htmlにしたい

「Permalink Manager Lite」で自由に編集できます。有料の「Pro」じゃなくても結構使えます。
が、そもそもwordpressでhtmlを使うのはイレギュラーなので、サイトリニューアル等で現ページからURLが変わってしまう場合は301リダイレクトの設定をした方が良いと思います。