こんにちは。fsです。
これまでの記事でWordpressのローカル環境構築、基本レイアウトの組み込みなどの初期設定の方法を紹介してきました。
今回はいよいよ実際にオリジナルテーマをコーティングしていきます。
作るサイトはブログサイト。
トップページに最新の投稿一覧を表示させていきます。
仕上げのイメージはこんな感じです。
プログラミング初心者の方でも作れるように画像を用いながら作業していきますので
ぜひ安心してお読みください。
トップページの作成
それでは作成していきましょう。
作業としては非常に簡単ですので、ご安心ください。
WordPressの基本のテンプレートタグの挿入
まずは基本となるテンプレートタグを挿入していきます。
テンプレートタグとは、Wordpressに何かを表示・取得させたいときに使うものです。
簡単に言うと「お決まりの文」のようなものです。
テンプレートタグは、PHPというプログラミング言語で作られている関数です。
WordPressはPHP で作られているので当然ですが😌
WordPressをカスタマイズしていくには、このテンプレートタグ使いこなすことが必要です。
テンプレートタグはWordPress Codexというサイトで調べることができます。
各タグの解説が載っているので、開発の際はとても参考になります。
まずは基本的なテンプレートタグである以下の2つを挿入していきます。
- wp_head(); →headタグの終わりの直前
- wp_footer(); →bodyタグの終わりの直前
このように書きます。
これらはWordpressを正常に動作させるためのおまじないみたいなものなので、あまり深く考えず入れていきましょう。
そうするとトップページの上部に管理バーが表示されるようになります。
タイトルを呼び出す
次にトップページで表示されているタイトルを実際の投稿のそれに連動させていきます。
Start Bootstrapからダウンロードしたファイルだと、htmlのみの記述なのでこれをWordpressのテンプレートタグに置き換えて記述していきます。
使うテンプレートタグはthe_title();。
これを使うことでWordpressで投稿したタイトルを表示してくれます。
ウェブサイトを更新してみると、デフォルトで入っている投稿のタイトルがちゃんと表示されています。
ただ、これだけだと機能で物足りません。
実際のブログでは、投稿がある場合とない場合で表示を分けていった方が良いからです。
試しに投稿を削除していきます。
そうすると記事が表示されなくなりました。
このように全く見えなくなると、記事がないからなのかそれともブログラムの異常なのか判断できなくなります。
なので、投稿がある場合はタイトルを表示し、
投稿がない場合は「記事が見つかりません」というコメントを表示させるようにプログラムを書いていきます。
if構文で分岐
これらの2つのパターンで分岐するにはif構文を使います。
今回は投稿の有無で分岐させるのでhave_posts()というテンプレートタグと組み合わせていきます。
具体的にはこう使います。
これで分岐処理は完了です。
試しに投稿を追加していきましょう。
ウェブサイトを更新すると最新のタイトルが表示されます。
ループ処理で記事をどんどん表示させる
記事のタイトルを引っ張ってくるプログラムがかけたところで、さらに記事を追加してみます。
トップページを更新すると、記事が最新のものに入れ替わってしまいました。
実際のブログ運営では、トップページ記事は一覧で表示させたいですよね。
なので、ループ（繰り返し）処理で記事をどんどん追加していくようなプログラムに書き換えていきます。
今回使うのはwhile構文。
これに繰り返したい処理の内容を書いていきます。
組み合わせるテンプレートダグはhave_posts()とthe_postのセットです（このセットはループを次の処理に進める命令を出してくれます）。
実際にはこのように書いていきます。
これで繰り返し処理ができたはずなのでトップページを更新してみます。
ループ処理が完了したら、Start Bootstrapのデフォルトデザインの余計な部分はカットしてOKです。
投稿日を表示する
次は投稿日も実際の日付にしていきます。
投稿日を引っ張るテンプレートタグはthe_timeを使います。
今回は管理画面で設定できる日付形式に連動できるよう以下のように書きました。
そうすると管理画面で選んだ形式の通りに投稿日が表示されます。
抜粋を実装する
記事一覧を表示させたら、各記事の抜粋も表示させていきましょう。
抜粋の表示処理も簡単です。
表示させたいところにthe_excerpt()というテンプレートタグを挿入するだけです。
管理画面で投稿に本文を追加していくと、抜粋が表示されるようになります。
なお、抜粋は管理画面から変更できます。
投稿入力欄の抜粋部分を記入すると、記入したコメントが上書きされます。
著者名を表示する
最後に著者名を追加します。
著者名の表示にはthe_author()というテンプレートタグを使います。
トップページを再読み込みすると、著者名が表示されました。
まとめ まずはシンプルな機能でテンプレートタグに慣れる
いかがだったでしょうか。
今回はWordpressで必須のテンプレートタグを使い、ブログサイトのトップページに簡単な機能を実装しました。
WordPress初心者には読み方が難しいテンプレートタグですが、このようにシンプルな機能から覚えておけば自然と慣れていきます。
テンプレートタグは一度覚えてしまえば、とても便利なものなので開発にも役立っていきます。
これからも引き続きWordpressのテーマ開発の記事を更新していきますので、興味のある方は楽しみにしていていただければと思います😌
今回は以上です。
最後までお読みいただきありがとうございました。
世界最大級の学習プラットフォームのUdemyでWordpressを学んでみよう!
コメント