今回の記事は、STEP4の「WordPress関数に書き直す」の「03.記事一覧の取得(ループ処理)」の解説となります。ランゲージ属性の設定、文字コード、タイトルタグの設定、ファビコンの設定、ヘッダータイトルの表示、背景画像の挿入、記事一覧の取得(ループ処理)を行います。
ローカル開発環境の起動
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となる条件を設定します。
記事一覧の表示(ループ処理)
次のような内容が6回繰り返して記載されています。
1行2列が1つの括りとなっています
index.phpの変更
次のAとBの括りで横2列に表示しています。
ループ処理を記述しますので、A、Bで同じ内容ですからBを削除します。
次に、記事の中身をWordpress関数をあてていきます。
あとの繰り返し処理は削除します。
サイトの確認
再読み込みをして、サイトを確認します。アイキャッチ画像の設定は行っていませんので、phpに記載された画像が全て表示されていますが、記事のタイトル、抜粋記事などは投稿記事の内容が正しく表示されています。
index.phpの修正
投稿記事の内容は正しく表示されていますが、サイドバーが下に落ちています。
これは、<div class=”col-lg-8″>の中にページネーションが含まれてない為です。</div>の位置を変えて直りました。