オリジナルテーマの作成トップページを表示

ここまでの流れ

ワードプレス整備士1級を目指すためにオリジナルでテーマを作成することを決意
オリジナルテーマの名前の付いたフォルダを作成
フォルダ内にindex.phpとstyle.cssを作成
style.cssにはテーマとしてワードプレスに新指揮してもらえるようにもコメントを記入
wp-content/themes/の下に作成したフォルダを配置
ワードプレスの管理画面からテーマを有効化
ansolution.tech（テーマの名前兼フォルダ名）
　index.php　これは空白
　style.css

/*
Theme Name:ansolution.tech
Description: ansolution.tech開発用の元ファイル
Version: 1.0
Author: inst_yamamoto@yahoo.co.jp
Author URI: 
*/

以上

トップページを表示できるようにする。

index.phpが空白だったので現在はサイトにアクセスしても真っ白で何も表示されていません。オリジナルのデザインをワードプレスで実現するのが喫緊の課題ですのでここ大切です。まずはデザインが画像とHTMLとCSSで実現している状態が必要です。ワードプレスを使用しない状態でwebサイトが満足いくデザインで完成している状態ですね。これをワードプレスに移植するわけです。この際に既存のテーマを利用する場合よく似たデザインのものを探してCSSやらHTML（テーマの該当部分）を検索して上書きしていくことになります。この作業が不満です。ワードプレスの独自関数が分からないし、どこを触ってよいかもわかりません。ここはいったんワードプレスの機能を忘れてデザイン優先で元のHTMLとCSSで完全再現させてみます。

ブートストラップでやります。

ご存じの方も多いでしょうがBootstrap5というものがあります。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。

https://ja.wikipedia.org/wiki/Bootstrap

主にCSSが作りこまれており自分のHTMLにBootstrap5で規定されたCSSのクラスを設定すると美しくデザインされたものになり、レスポンシブ対応も可能といった優れものです。

MIT License（エム・アイ・ティー ライセンス）なので無料で利用できます。ただ、bootstrapを利用したテーマ（ワードプレスではない）では有料の物だったり著作権表示が必要なものがあったりしますのお気を付けください。

Bootstrap5設置ガイド というサイトがありましてBootstrap5については日本語で詳しく解説があります。おそらく公式サイトだと思います。そこの実例にサンプルがダウンロードできますのでそれを参考にサイト作成していきたいと思います。
英語版の本家にもhttps://getbootstrap.com/docs/5.1/examples/から実例が見られますが日本語サイトから一括ダウンロードしておきます。Bootstrap5設置ガイド の上の方に実例のダウンロードがありますのでクリックします。ページにひょじされている実例が一括でダウンロードできます。
解凍してください。サイトのサンプルがいっぱいありますのでその中のcarouselで実践していきます。

法人でも個人でも、blogでも大丈夫そうなデザインですね。メニューは上部固定でレスポンシブ対応です。当然ここは今後オリジナルデザインが入りますが練習ということでこれを使います。

HTMLをコピペ

ではここから本番です。再度テーマ用のフォルダを作成し、テーマを作ります。テーマ名はcarouselとしたいですがよくある名前なので万が一のダブリに備えて頭にansolution-carouselとしておきます。ansolution-carouselというフォルダを作成します。その中に先ほどダウンロードしたBootstrapのcarouselの中身を放り込みます。

index.html
carousel.css
carousel.rtl.css

の3つです。この状態でindex.htmlをブラウザで確認するとCSSが効いていない状況のはずです。htmlの中で16行目で

<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

1階層上のassetsフォルダ以下のCSSを読み込もうとしているからです。この読込先を変更します。幸いBootstrapにはCDNという仕組みがあるのでネット上にあるBootstrapのCSSを読み込みます。もちろんCSSファイルを移動する方法もあります。今回はCDNで実行します。Bootstrap5 CDNで検索するとすぐに見つかります。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

これに書き換えます。さらに210行目でJavaScriptも読み込んでいるのでこれもCDNに変更しておきます。先ほどのページのすぐ下にJavaScriptのCDNもあります。210行目を置き換えてください。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

これで表示がうまく機能するようになります。これではまだ、ワードプレスのテーマとは認識されません。index.htmlをindex.phpにファイル名を変更します。拡張子のhtmlをphpに変更ですね。更にstyle.cssファイルを新規で作成しコメントを記入しておきます。

/*
*Theme Name:ansolution-carousel
*/

これでテーマとして認識してくれます。でもまだもう少し手を加える必要があります。元のindex.html（今はindex.php）の35行目にcarousel.cssを読み込む記述があります。これはこのままではうまく読み込んでくれません。このテーマのindex.phpはアクセスしたときにはトップページになりますが実際にはルート/wp-content/themes/テーマフォルダ/index.phpにありますのでCSSは実際には同じフォルダにありますが違う階層にあると認識されることになります。

<link href="wp-content/themes/ansolution-carousel/carousel.css" rel="stylesheet">

と書き換えたいところですが、ワードプレスはテーマを変更したら見栄えも変更できるということなのでindex.phpの中にテーマ名が固定化してしまうとテーマを変更するたびにPHPファイルを編集しなければならなくなります。（index.phpもテーマごとに新たになるので問題ないのですが、別テーマでindex.phpを使いまわしたい時に困ります。）オリジナルテーマの作成なのでそこまで考慮しなくてもよさそうなものですがワードプレス関数を使って実装しておきます。別の方法もあり後ほどそちらに変更しますが、いったん完結したいので以下のように書き換えてください。

<link href="<?php echo  get_theme_file_uri(); ?>/carousel.css" rel="stylesheet">

PHPがダブルクォーテーションの間に書かれています。拡張子がphpのファイルはHTMLファイルのなかにPHPのプログラムを記述することができます。（サーバーでPHPが稼働している場合）今回はCSSファイルのある場所（URL）を指定するのに現在のテーマのフォルダのURLを返してくれます。

<?php と ?>の間にPHPを記入します。

今回はget_theme_file_uri()というワードプレス関数（もとになるPHPの関数ではなくワードプレスが規定した関数）を使います。自動的に現在のテーマのフォルダのある位置を教えてくれます（wp-content/themes/ansolution-carouselが出力されています）。echoはHTMLファイルに書き出すということです。最後のセミコロン ; はPHPのルールで1つの命令がここで終わりという感じです。

まだまだ先は長いですがオリジナルのデザインがワードプレスの中で表示できるようになったのでのでフォルダごと所定の場所wp-content/themes/にアップロードしてください。

この時点のオリジナルテーマをダウンロード