WordPressテーマ作成④ グーテンベルクのCSSを機能させる【day152】

WordPress

今日は、WordPressテーマ作成④グーテンベルクのCSSを機能させる、についてアウトプットしていきます。

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

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

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

・・

(*独り言*
ありがたいことにWebコーディング・Webライティングの案件が重なり忙しくなってきました..!スキマ時間を見つけては、速度を上げてWordPressの学習に励んでいます..!がんばろーーー!!)

WordPressテーマ作成④ グーテンベルクのCSSを機能させる

【今回のブログのゴール】
・グーテンベルク対応WordPressテーマを作るために、まずグーテンベルクを機能させる。
・グーテンベルクを機能させるために、テーマエディタからCSSを適用させる。

 *前回までの記事はこちらです↓
①WordPressテーマの基礎となるファイルを作成→記事はこちら
②WordPressのアルゴリズム→記事はこちら
③タイトルと本文を表示させる→記事はこちら
④記事に画像を表示させる→記事はこちら

用語:エディタとフロント

グーテンベルクの開発の中では、

編集画面 => エディタ
実際のプレビューしたページ => フロント

のように呼ばれています。

(復習) 昨日までのCSS設定の解説

昨日までで、

・index.phpに基本的な設定をする
・ブロックエディタでタイトル・本文・画像を表示させる

ところまでを終えました。このようなページが出来上がっています。

このページが反映されるまでには、

①エディタにグーテンベルクがもともと持っているCSSが自動適用されている
②index.phpに書かれた<?php wp_head(); ?>によって、グーテンベルクがもともと持っている「style.min.css」が適用されて、背景色などの装飾ができる
というCSSの処理が行われていました。(復習)

フロントに適用するCSSをテーマ側で有効化

フロントに適用されるCSSは、

・グーテンベルクがもともと持っているCSS
・テーマエディタ側で有効化することで適用されるCSS

の2種類があります。今回は、後者を設定していきます!

functions.phpを編集する

テーマエディターから、functions.phpを編集していきます。

functions.phpは、WordPressの各種設定をするためのファイルです。

<?php

//CSSを有効にする
add_theme_support( 'wp-block-style'  );

上記のコードを記述します。

注意① ファイル名は、「functions.php」じゃないと機能しません。私は、最初「function.php」にしてしまっており、反映されませんでした。
注意② functions.php内の<?php>の記載は、閉じタグ( ?>)を記載しないようにします。不要なトラブルが起きないように、そのような決まりになっているようです。

CSSを有効化する②

上記の「add_theme_support」は、WordPressの処理の中で「after_setup_theme」のアクション時に実行しなくてはなりません。

それらを関数で呼び出せるように、下記の記述を、追加します。

function mytheme_setup(){
//ここに先ほどのCSSを有効にする記述を入れる
}
add_action( 'after_setup_theme', 'mytheme_setup');

更新 > プレビューし、ディベロッパーツールでCSSの読み込みを確認してみます。

ディベロッパーツールのElements上でCtrl + F(検索窓)を出します。「theme」を入れて検索すると、<head>内に「theme.min.css」の読み込みが見つかりました!

この「theme.min.css」が、グーテンベルクのPHP側から設定するCSSです。

ちなみに、フロントに特に変化はありません。↓

theme.min.css が反映されるもの

対象は、

・コード
・プルクオート
・引用
・検索
・区切り線
・テーブル
・画像などのキャプション表示
などです。

例・プルクオートを試してみる

プルクオート機能を試しに追加してみます。

ブロックエディタから、ブロックの追加 > プルクオートを選択。

こんな感じで、文章を目立たせる「プルクオート」を追加しました。

プレビューして、ディベロッパーツールで確認してみます。

<figure>で囲まれたプルクオートの部分に、theme.min.cssが適用されているのがわかります。

あとがき

CSSの設定の仕方が、普段のHTMLでの設定と違うので少し戸惑いますね。学習時間が細切れなため、アウトプットもいつもより細切れになっていますが、コツコツやっていきます。

参考書籍は、こちらです。

このブログよりもっと細かな説明があり、初心者でも理解しやすいです。

 

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

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