WordPressのトップページに最新の投稿を表示させる

Wordpress

こんにちは。fsです。
これまでの記事でWordpressのローカル環境構築、基本レイアウトの組み込みなどの初期設定の方法を紹介してきました。

今回はいよいよ実際にオリジナルテーマをコーティングしていきます。

作るサイトはブログサイト。
トップページに最新の投稿一覧を表示させていきます。

仕上げのイメージはこんな感じです。

これを作っていきます

プログラミング初心者の方でも作れるように画像を用いながら作業していきますので
ぜひ安心してお読みください。

トップページの作成

それでは作成していきましょう。
作業としては非常に簡単ですので、ご安心ください。

WordPressの基本のテンプレートタグの挿入

まずは基本となるテンプレートタグを挿入していきます。
テンプレートタグとは、Wordpressに何かを表示・取得させたいときに使うものです。
簡単に言うと「お決まりの文」のようなものです。

テンプレートタグは、PHPというプログラミング言語で作られている関数です。
WordPressはPHP で作られているので当然ですが😌

WordPressをカスタマイズしていくには、このテンプレートタグ使いこなすことが必要です。
テンプレートタグはWordPress Codexというサイトで調べることができます。
各タグの解説が載っているので、開発の際はとても参考になります。

まずは基本的なテンプレートタグである以下の2つを挿入していきます。

  • wp_head();  →headタグの終わりの直前
  • wp_footer(); →bodyタグの終わりの直前

このように書きます。

headタグ終了の前に書く
bodyタグの終わりの前にかく

これらはWordpressを正常に動作させるためのおまじないみたいなものなので、あまり深く考えず入れていきましょう。

そうするとトップページの上部に管理バーが表示されるようになります。

このように管理バーが表示されます

タイトルを呼び出す

次にトップページで表示されているタイトルを実際の投稿のそれに連動させていきます。

この部分を実際の投稿タイトルにしていきます

Start Bootstrapからダウンロードしたファイルだと、htmlのみの記述なのでこれをWordpressのテンプレートタグに置き換えて記述していきます。

この部分をテンプレートタグに置き換えていきます

使うテンプレートタグはthe_title();。
これを使うことでWordpressで投稿したタイトルを表示してくれます。

このようにテンプレートタグで置き換えます

ウェブサイトを更新してみると、デフォルトで入っている投稿のタイトルがちゃんと表示されています。

投稿記事のタイトルから引っ張ってこれました

ただ、これだけだと機能で物足りません。
実際のブログでは、投稿がある場合とない場合で表示を分けていった方が良いからです。

試しに投稿を削除していきます。

管理画面の投稿一覧へ
ゴミ箱で投稿を削除

そうすると記事が表示されなくなりました。

投稿がなくなりました

このように全く見えなくなると、記事がないからなのかそれともブログラムの異常なのか判断できなくなります。
なので、投稿がある場合はタイトルを表示し、
投稿がない場合は「記事が見つかりません」というコメントを表示させるようにプログラムを書いていきます。

if構文で分岐

これらの2つのパターンで分岐するにはif構文を使います。
今回は投稿の有無で分岐させるのでhave_posts()というテンプレートタグと組み合わせていきます。
具体的にはこう使います。

投稿がある場合はthe_titleでタイトルを表示
投稿がない場合は「記事が見つかりません」というコメントを表示させます

これで分岐処理は完了です。
試しに投稿を追加していきましょう。

管理画面で投稿を追加

タイトルを入れて公開します

ウェブサイトを更新すると最新のタイトルが表示されます。

最新のタイトルになっています
記事がない場合もちゃんとコメントが表示されています

ループ処理で記事をどんどん表示させる

記事のタイトルを引っ張ってくるプログラムがかけたところで、さらに記事を追加してみます。

管理バーからでも追加ができます
投稿作成画面で追加

トップページを更新すると、記事が最新のものに入れ替わってしまいました。

記事が入れ替わってしまった

実際のブログ運営では、トップページ記事は一覧で表示させたいですよね。
なので、ループ(繰り返し)処理で記事をどんどん追加していくようなプログラムに書き換えていきます。

今回使うのはwhile構文。
これに繰り返したい処理の内容を書いていきます。

組み合わせるテンプレートダグはhave_posts()とthe_postのセットです(このセットはループを次の処理に進める命令を出してくれます)。
実際にはこのように書いていきます。

このように書きます

これで繰り返し処理ができたはずなのでトップページを更新してみます。

投稿一覧が表示されました

ループ処理が完了したら、Start Bootstrapのデフォルトデザインの余計な部分はカットしてOKです。

ループ処理で囲った以外のセクションはカットしてOK

投稿日を表示する

次は投稿日も実際の日付にしていきます。

これらも実際の日付に直します

投稿日を引っ張るテンプレートタグはthe_timeを使います。
今回は管理画面で設定できる日付形式に連動できるよう以下のように書きました。

このように書きます

そうすると管理画面で選んだ形式の通りに投稿日が表示されます。

管理画面で形式を選ぶ

無事日付が表示されました

抜粋を実装する

記事一覧を表示させたら、各記事の抜粋も表示させていきましょう。
抜粋の表示処理も簡単です。

表示させたいところにthe_excerpt()というテンプレートタグを挿入するだけです。

このように挿入していきます

管理画面で投稿に本文を追加していくと、抜粋が表示されるようになります。

管理画面で本文追加
抜粋が表示されました

なお、抜粋は管理画面から変更できます。
投稿入力欄の抜粋部分を記入すると、記入したコメントが上書きされます。

管理画面で抜粋を上書き

抜粋が上書きされました

著者名を表示する

最後に著者名を追加します。
著者名の表示にはthe_author()というテンプレートタグを使います。

このように書けば著者名を表示できます。

トップページを再読み込みすると、著者名が表示されました。

著者名は管理画面で設定できます

まとめ まずはシンプルな機能でテンプレートタグに慣れる

いかがだったでしょうか。
今回はWordpressで必須のテンプレートタグを使い、ブログサイトのトップページに簡単な機能を実装しました。

WordPress初心者には読み方が難しいテンプレートタグですが、このようにシンプルな機能から覚えておけば自然と慣れていきます。

テンプレートタグは一度覚えてしまえば、とても便利なものなので開発にも役立っていきます。

これからも引き続きWordpressのテーマ開発の記事を更新していきますので、興味のある方は楽しみにしていていただければと思います😌

今回は以上です。
最後までお読みいただきありがとうございました。

世界最大級の学習プラットフォームのUdemyでWordpressを学んでみよう!



この投稿は役に立ちましたか? 役に立った 役に立たなかった 6 人中 6 人がこの 投稿 は役に立ったと言っています。

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

タイトルとURLをコピーしました