【やってみた】WordPressのテーマ自作(03.記事一覧の取得)

今回の記事は、STEP4の「WordPress関数に書き直す」の「03.記事一覧の取得(ループ処理)」の解説となります。ランゲージ属性の設定、文字コード、タイトルタグの設定、ファビコンの設定、ヘッダータイトルの表示、背景画像の挿入、記事一覧の取得(ループ処理)を行います。

テーマ自作の流れ

STEP1:
静的サイトの作成
ワイヤーフレームでサイトをデザインして、HTMLとCSSで静的サイトを作成します。index.htmlとstyle.cssでサイトを作成します。
STEP2:
開発環境構築
自分のパソコン内部だけで開発と動作テストが行えるWordPress専用の環境構築ソフト、HTML、CSS、PHPの編集の為のソースコードエディタ、そしてHTMLとCSSで構築された静的サイトを準備します。
STEP3:
テーマの有効化
自作テーマを有効化する為に、index.htmlをindex.phpに書き換え、style.cssを作成してWordPressにアップロードして認識してもらいます。
STEP4:
WordPress関数に書き直す
テーマとして認識できましたら、index.phpの内容をヘッダー、フッター、サイドバー等コンテンツごとに分割したり、アイキャッチ画像やナビゲーションメニュー等を設定する為に、WordPress関数に書き直していきます。
STEP5:
サーバーにアップロード
サーバーにアップしてWebに公開します。公開後、プラグインなどで必要な機能を追加したり、必要なカスタマイズを行います。

ローカル開発環境の起動
1. WordPressの起動
2. ソースエディター(VSC)の起動
トップページの編集
記事一覧の取得
1. 記事一覧取得の準備
2. 記事一覧の表示(ループ処理)

ローカル開発環境の起動

WordPressの起動

解説動画は、こちら

サイトの選択

「mysite」にローカル開発環境を構築していますので、「mysite」を選択します。

「Start site」のクリック

「mysite」の起動

「1 site running」となり、「mysite」が起動しました。

処理の選択

WordPressにログイン

サイトの表示

フォルダーにアクセス

ソースエディター(VSC)の起動

「Go to site folder」のクリック

VSCの起動

app→piblic→wc-content→themes→myblogで右クリックからVSCを起動します。

トップページの編集

編集の準備

管理画面から、「一般設定」のサイトのタイトル、キャッチフレーズを設定します。

head要素の編集

lang属性の設定

ダウンロードしてきたStartBootstrapのファイルが英語で作られていますので、”en”となっています。日本語を扱うときは”ja”と記述することが必要ですが、WordPressのテーマの場合は、設定によって変わりますので、以下のテンプレートタグを記述します。

サイトを再読み込みして、ソースを確認すると、”ja”と出力されています。

文字コードの設定

サイトを再読み込みして、ソースを確認すると、”utf-8″と出力されています。

タイトルタグの設定

titleタグに記載されている内容が表示されますが、固定の文字列で記述していますので、別のページにアクセスしてもタイトルは変わりません。このままではGoogleの検索で正しく検索されません。

タイトルタグはタグ内に記述しなくても、functions.php に以下を記述すれば、WordPress がページ種類に応じてタイトルタグを自動的に表示(挿入)してくれます。

functions.phpの作成

新しいファイルとしてfunctions.phpを作成します。

コードの設定

タイトルタグの出力

<title>Blog Home = Start Bootstrap Template</title>を削除してソースを確認すると<title>～</title>が出力されています。

ファビコンの設定

favicon画像を自身のサイトの画像に変更します。画像を用意して、imgフォルダに格納します。(favicon.icoという名前の32x32pxの画像を用意しました。)

登録したファビコン画像となりました。

ヘッダータイトルの表示

「Welcom to Blog Home」と表示されている箇所にサイトのタイトルとキャッチフレーズを表示します。

「bloginfo」というテンプレートタグを使い、次の様に変更します。

[ コードの解説 ]

テンプレートタグ/bloginfoは、WordPress管理画面の一般設定に設定した「サイトのタイトル」、「キッチフレーズ」を表示します。

‘name’:管理画面の「設定/一般」で設定された「サイトのタイトル」を表示します。
‘description:管理画面の「設定/一般」で設定された「キャッチフレーズ」を表示します。

背景画像の挿入

サイトのタイトルとキャッチフレーズを表示している背景に画像を挿入します。

index.phpの変更

コードの記述

文字色の変更

文字が見にくいので、whiteとします。

スタイルの調整

サイトタイトルの文字を装飾する為に、クラス名(hname)を付けて、style.cssでスタイル調整をします。

style.cssの追加

/* サイトタイトル文字の装飾 */
.hname {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: rgba(255, 255, 255, 1);
    font-size: 50px;
    text-shadow: 4px 0px 3px rgba(38,22,242,0.8);
    font-weight: bold;
    }

背景画像の確認

背景画像の挿入が完成しました。

記事一覧の取得

記事一覧取得の準備

今、表示されている記事は、プログラムに記述された内容がそのまま表示されています。これを、実際の投稿記事を読み込んで表示する様にします。

記事一覧の確認

記事の投稿

ループ処理を行う前に、まず結果を確認できる様に5～10件記事を投稿しておきます。

記事一覧の処理方法

ループ処理を使って記事一覧を取得します。ループの基本的な記載方法は、次の通りです。

処理の説明

＜?php if (have_posts()) : ?＞～＜?php endif; ?＞で表示できる記事があるか判断します。記事がなければ、＜?php else : ?＞～＜?php endif; ?＞内が実行されます。
記事があれば、＜?php while (have_posts()) : the_post(); ?＞～＜?php endwhile; ?＞で、最初から順に記事があるか調べて、繰り返し取得していきます。

While構文:処理を繰り返す構文です。
have_posts関数:次の記事があるか調べます。
(「have_posts()」は「have_posts() == true」のこと)
the_post関数:次の記事を取得する

注意:
whileは条件がtrueの間は繰り返してしまうので、無限ループしてしまいますので、必ず最初はtrueで最後にはfalseとなる条件を設定します。