WordPressテーマ作成② タイトルと本文を表示する【day143】

WordPress
2020.10.06

今日は、WordPressのテーマ作成「タイトルと本文を表示する」についてアウトプットしていきます。

こんにちは。Webコーダーのharuです。

＊わたしについて＊
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
HTML/CSS(SCSS)/jQueryに加え、WordPressの学習中です。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

・・

Webライター案件をいただいており、ブログ更新が滞ってしまいました;(´◦ω◦｀):

少しずつですが、WordPress学習を進めつつ、アウトプットの時間を増やしていきたいと思います。がんばろう。

WordPressテーマ作成② タイトルと本文を表示する

前回は、WordPressテーマの基礎となる「index.phpやその他のファイル」を作成し、テーマフォルダに入れるところまでをおこないました。→前回の記事はこちら

また、WordPressのアルゴリズムについても学習しました →記事はこちら

【今回のブログのゴール】
index.php を編集して、記事にタイトルと本文を表示させます。
さらに、WordPress本体にもともとあるCSSを反映させて、装飾を行います。

記事の編集には、WordPress標準エディタである「ブロックエディタ」を使用していきます。

グーテンベルクとブロックエディター

その前に、よく聞くグーテンベルクとブロックエディターは同じものなのでしょうか。

了さん(@ddryo_loos)の「ブロック開発入門」によると、

・「Gutenberg」とはWordPressが現在進めている壮大なプロジェクト名のこと
・「ブロックエディター」は、そのGutenbergプロジェクトの第一段階で実装された新しいエディターのこと

たとえば・・

①ブロックに文章を入力
↓
②ブロックに見出し機能・カラー機能を追加
↓
③見出しの大きさやカラーを変更することができる

この過程では、ボタン一つで見出しやカラー変更を実装することができるわけですが、裏側では追加されたClassに、もともとWordPress自体が持っているCSSが反応して、スタイルが反映されます。

タイトルと本文を表示させる

ここでは、グーテンベルクのブロックエディターを使って、記事のタイトルと本文を入力していきます。

WordPressの「投稿一覧」から編集中の記事を選択 => ブロックの追加を選択。

開かれたブロックに、文字を入力していきます。

適当に文字を入力してみました。

 保存 > 「投稿を表示」を選択。

すると、プレビューページは真っ白です。↓

 なぜ、表示されないのか？
テーマフォルダにある「index.php」が白紙だから。
WordPressのデータベースに保存されたデータから、タイトルと本文を表示させる指示をする必要があります。

そこで、index.phpに必要な設定を記述します。

外観 > テーマエディタ から、index.phpに以下のテンプレートタグを入力、保存します。

//ループ設定開始
<?php if(have_posts()): while(have_posts()):the_post(); ?>

//タイトルを表示させる
<?php the_title(); ?>

//本文を表示させる
<?php the_content(); ?>

//ループ設定終了
<?php endwhile; endif; ?>

上記の「ループ設定〜ループ設定終了」の中に、タイトルと本文を表示させるテンプレートタグを記述します。ループ設定がないと、本文がうまく表示されません。

ループがおこなっている詳細
①if(have_posts())→データベースに記事に関するデータがあれば、中に書かれた記述を実行。
②while(have_posts())→取り出したい記事の数だけ、データ取得を実行します。
③the_post()→処理数をカウント・取り出したデータをテンプレートタグで使えるように処理。

もう一度、記事をプレビューしてみます。↓

——————————————————————————->

——————————————————————————->

ブロックエディターの内容が、うまく表示されました！

記事を装飾する

次に、先ほどの記事に背景色の追加をしてみます。

背景を追加するブロックを選択します。
ページ右にある「ブロック」メニューから、色を選択。「更新」をしておきます。

記事をプレビューしてみます。↓

——————————————————————————->

——————————————————————————->

うまく表示されていません。。

Chromeディベロッパーツールを開いて確認してみます。

背景色を追加したい<p>に classが付与されています。has_background(背景色を指定)やhas-luminous-vivid-background-color(背景色は琥珀色)などが付与されていることが確認できます。

なぜ、背景色が適用されないのかというと、これらのCSSが反映されるようにテンプレートで設定がされていないからです。

index.phpに設定を追加し、CSSを適用させる

WordPressで必須の設定がいくつかあるので、すべて設定します。

①DOCTYPE宣言、<html><head><body>など基本的なhtmlの設定
②各種コードを出力するために必須のテンプレートコード
-</head>前：<?php wp_head(); ?>
-<body>後：<?php wp_body_open(); ?>
-</body>後：<?php wp_footer(); ?>

今までと同様に、テーマエディターからindex.phpを編集します。

更新 > ページをプレビューすると、CSSが適用されて背景色がつきました。
また、ページ上部にWordPressのツールバーも表示されています。↓

で反映されたCSSは、WordPressのグーテンベルクがもともと持っているCSSです。
わたしがCSSのコードを指定したわけではありません。

追加設定

最後に、いくつか必須の設定をおこないます。

「ページ」を区別するクラス名を設定

ページとページを区別するために、<body>にクラス名をつけておくことが求められます。

<body>に以下のテンプレートタグを追加します。

<body <?php body_class(); ?>>

 

ディベロッパーツールで確認してみると、<body>にクラス名が表示されました。

ページ内で「記事」を区別する設定

少しややこしいですが、ページの中で「ここからここまでが記事である」というクラス名を設定します。

<?php the_titile(); ?>と<?php post_class(); ?>のある記事部分を<article>でマークアップします。

追加するテンプレートタグは以下です。

<article <?php post_class(); ?>

以下のように編集。

ディベロッパーツールで確認すると、<article>にもクラス名が表示されました。

WordPressのツールバーを非表示にする

最後に、画面上部に表示されたツールバーは不要なので、こちらを非表示にします。

管理画面から、ユーザー > プロフィールを選択。

「サイトを見るときにツールバーを表示する」にチェックがついているので、外します。

設定を保存してプレビューすると、ツールバーが外れました。↓

 

あとがき

まだ、テーマ作成をする上での基礎の基礎の部分です。書籍は、1/4ほど進みました。

参考書籍は、こちらです(*･ᴗ･*)و

ノロいですが、確実に理解しながら進めたいと思います。

今日は以上です。

 

Thanks：師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

スポンサーリンク