つくりてのざれごと

はじめに 現在Wordpressにて自作テーマを作成し、一応サイトの構造の目処が立ったところである。自作テーマの作成については後々報告しようと思う。 その自作テーマのメインナビにBootstrapを導入したいと思い調べたところ、意外と簡単にできたので、その方法をまとめて報告しようと思う。 Bootstrapを導入する前に、まずWordpressでメインナビ用のメニューを作成しておかなければならない。 上図の通り、Wordpressのダッシュボードで、 外観→メニュー にて、カスタムメニューを作成し、メニュー名を設定しておく。 class-wp-bootstrap-navwalker.phpのダウンロードとインストール GitHub から、class-wp-bootstrap-navwalker.phpをダウンロードする。 /wp-content/themes/（使用するテーマ名フォルダ）/ 内に、class-wp-bootstrap-navwalker.phpをアップロードする。 functions.phpにファイル読み込みのコードの追加 /wp-content/themes/（使用するテーマ名フォルダ）/functions.php のfunctions.phpを開き、下記をそのまま追加する。 /** * Register Custom Navigation Walker */ function register_navwalker(){ require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php'; } add_action( 'after_setup_theme', 'register_navwalker' ); 画像下のコードは、上記コードでエラーが発生した時、上記コードと差し替えるものである。 header.phpなどにメニュー用関数の追加と設定 メニュー用関数の追加 下記コードを、 /wp-content/themes/（使用するテーマ名フォルダ）/header.php のheader.phpに追加する。 具体的な追加箇所は次項で。 テーマ...

はじめに 投稿一覧ページは主に index.php や archive.php などで作成され、投稿一覧に表示される画像は各投稿ページの編集画面で設定されたアイキャッチ画像が読み込まれる仕様になっている。 今回、テーマを自作した際、 投稿一覧ページ自体にアイキャッチ画像を設定したかった のだが、普通にアイキャッチ画像を設定しても、ページには 最新投稿用のアイキャッチ画像が表示されてしまう 。 そもそも、投稿一覧ページ自体にアイキャッチ画像を設定することはほぼ無いので、 需要がどこまであるか不明 だが、この解決方法を見つけたので、一応紹介しようと思う。 事前準備 事前準備として、自作テーマでアイキャッチ画像を表示させるために、functions.phpにアイキャッチ画像を有効化する関数を追加する。 以下の関数をそのままfunctions.phpに追加。 add_theme_support('post-thumbnails'); アイキャッチ画像を表示するthe_post_thumbnail()関数 アイキャッチ画像を表示する関数は、 the_post_thumbnail() だが、これはループ内でのみ使用可能なので、通常は <?php if ( has_post_thumbnail()): ?> <?php the_post_thumbnail(); ?> <?php endif; ?> として使用する。 投稿件数分のアイキャッチ画像を表示するwhile構文 投稿は件数が増減するので、投稿一覧ページで各投稿のアイキャッチ画像を表示するには、投稿がある分全て取得しなければならない。 その場合は while構文 を使用して取得する。 <?php if(has_post_thumbnail()): ?> <?php while(has_post_thumbnail()): ?> <?php the_post_thumbnail(); ?> <?php endwhile; ?> <?php endif; ?> そんな感じで、Wordpressの自作テーマ中に投稿一覧ページ用のind...