つくりてのざれごと

はじめに 現在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

Docker に PHP＋Apache＋MySQL開発環境 を設定する方法を、最終的にDocker Composeにまとめて構築するまでを模索する。 今回は目次を見れば分かるように、非常に長い話なので、休み休み一読していただきたい。 開発環境 マシン： MacBook Pro OS： macOS Big Sur （11.6.3） 仮想環境： Docker Desktop （4.4.2 (73305)） Docker Engine :20.10.12 Docker Compose :2.2.3 エディタ： Sublime Text （Build 4126） php ：8.1.2 Xdebug ：3.1.3 Apache ：2.4.52 MySQL ：8.0.28 phpMyAdmin ：5.1.3（TerminalでMySQLを確認するより楽なので導入） 【必要】Docker Desktopをインストール Docker Desktopをインストールしていない 場合は、 下記ブログの1と2 を参考にしていただければ。 MacにDockerをインストールしPythonが使えるまでのまとめ【初心者向け】 初心者がDockerをインストールするのはハードルが高いですよね。初心者である筆者がDockerのインストール方法を調べて試してみたのでその手順を公開します。用語については、理解しないままとりあえず放置します。理解しようと用語を調べだしたらそれに時間を取られてインストールに進めないので。 blog.eszett-design.com 階層構成 今回作成した フォルダ及びファイルの階層構造 は以下の通り。 この階層構造を元に各ファイル内容を作成しているので、もし階層構造を変更した場合、各ファイル内容も変更する必要があることに注意。 php_test └data # MySQLデータ保存用 └docker-compose.yml └mysql │└Dockerfile │└my.cnf │└sql # MySQLへインポートするファイル収納用 │ └init.sql # テスト用データベースデータ │ └php │└Dockerfile │└