wordpress

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

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

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

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

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

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

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

Before

After

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

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

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

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

front-page.php TOPページ。understrapのデフォルトではmainタグまでの”ガワ”になります。
このサイトはブログ型なので問題ないですが、企業サイトなどオリジナリティのあるページ構成にしたい場合はサイト型表示といって固定ページにテンプレートを当てるパターンが多くなります。
header.php ヘッダー部分です。グロナビに凝りたい場合だけでなく、bodyタグの開始部分も含まれているため結構触ります。
header-○○.php 複数のheaderを使い分けたい場合。
<?php get_header(‘○○’); ?>と呼び出しでハイフン以下を指定する。
footer.php フッター部分です。メニューを入れたりコピーライトの修正をしたり。
footer-○○.php 複数のfooterを使い分けたい場合。
<?php get_footer(‘○○’); ?>と呼び出しでハイフン以下を指定する。
single.php 投稿記事ページの”ガワ”がここに反映されます。パンくずプラグインの「Breadcrumb NavXT」を投稿ページに設置したいときは、このphpにコードを置きました。
投稿記事の内部は/loop-templates/内のcontent-single.phpが反映されます。
single-○○.php カスタム投稿タイプの投稿記事ページのデザインを変えたい場合。
カテゴリーごとに投稿記事ページのデザインを変えたい場合にも使える(single.phpに分岐条件を記述する
content-single.php /loop-templates/内にあります。
投稿記事の内部(mainタグの内側部分)です。といってもphpなので、見出し、投稿日情報、記事後のfooter等の配置やclassの指定になります。このブログでは記事ページの一番下に広告を入れるために、このphpに追記しました。
カスタム投稿タイプが無いなら上述のsingle.phpの中に入れて1ファイルにしちゃってもいいような……。
content-カスタム投稿タイプ名.php /loop-templates/内にあります。
カスタム投稿記事だけ体裁を変えたい場合に作成します。
archive.php カテゴリ一覧、タグ一覧などのアーカイブページです。
アーカイブページをさらに細かくカスタマイズしていきたい場合は、カテゴリ一覧はcategory.php、特定のカテゴリの一覧はcategory-××(slug名).php、日付別一覧はdate.phpなど増やしていきます。
archive-カスタム投稿タイプ名.php カスタム投稿ページがある場合のアーカイブページです。archive.phpをコピーし名前を変えます。
「Custom Post Type UI」プラグインを使用している場合、archive-カスタム投稿タイプ名.phpをUP後に、「投稿タイプの追加と編集」から「投稿タブの編集」タブに切り替え、「設定」ブロックの「アーカイブあり」をTrueに。
content.php /loop-templates/内にあります。投稿の一覧ページのループ部分になります。
home.php understrapには含まれていないファイルですが、投稿一覧ページ(TOPページがサイト型表示で、それとは別にブログのトップページを作りたい場合)の器部分になります。
content-search.php /loop-templates/内にあります。検索結果ページです。
page.php 固定ページにテンプレートを当てずに記事を流し込んだ場合に反映されるベースとなります。
index.php 一般的にfront-page.php、archive.php、single.php、page.phpが子テーマに無い場合、index.phpが反映されるようですが、
understrapだと投稿一覧ページ扱いになります。
404.php Not Foundページです。見せ方とか文章とか変えたい場合に。
template-tags.php /inc/内にあります。投稿ページで、デフォルトではh1タイトル後に「投稿日」「編集日」「投稿者」ですが、どれか非表示にしたい、位置を移動させたい、「カテゴリー」「タグ」等を追加させたい場合に編集(というか設定)します。中級者以上向け。

カスタマイズメモ

共通項目を変更する

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

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

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

ロゴを設置することも考えると、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.phparchive.phpに記述されている上記のphpタグはデフォルトのBootstrapのページネーションを呼び出すので、このままの状態でカスタマイズしたい場合は任意のclassを付けた親要素で囲んで、CSSで調整します。

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

方法その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のテンプレートタグを使用した方が良さそうです。

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

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

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

understrapBootstrap使用のテーマなので、
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('[ショートコード]'); ?>

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

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

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リダイレクトの設定をした方が良いと思います。