今日は、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プロジェクトの第一段階で実装された新しいエディターのこと
(※現在、無料公開されている執筆本のようなので、ぜひ!
ブロックエディターを使った開発について、とてもわかりやすく詳しく書かれています。)
ブロックエディタの入門書👀✨
最初の部分からちゃんと知らなかった..💦> ・「Gutenberg」とはWordPressが現在進めている壮大なプロジェクト名のこと
・「ブロックエディター」は、そのGutenbergプロジェクトの第一段階で実装された新しいエディターのこと https://t.co/1MEBT4wiez— はる🌸ARUTEGA (@fuwafuwahappy) October 5, 2020
ブロックエディタは、ブロックに画像や文字を入力することで、感覚的にページを作成することが可能です。
たとえば・・
①ブロックに文章を入力
↓
②ブロックに見出し機能・カラー機能を追加
↓
③見出しの大きさやカラーを変更することができる
この過程では、ボタン一つで見出しやカラー変更を実装することができるわけですが、裏側では追加された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で必須の設定がいくつかあるので、すべて設定します。
②各種コードを出力するために必須のテンプレートコード
-</head>前:<?php wp_head(); ?>
-<body>後:<?php wp_body_open(); ?>
-</body>後:<?php wp_footer(); ?>
今までと同様に、テーマエディターからindex.phpを編集します。
更新 > ページをプレビューすると、CSSが適用されて背景色がつきました。
また、ページ上部にWordPressのツールバーも表示されています。↓
わたしが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はこちら