今日は、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に書かれた<?php wp_head(); ?>によって、グーテンベルクがもともと持っている「style.min.css」が適用されて、背景色などの装飾ができる
フロントに適用するCSSをテーマ側で有効化
フロントに適用されるCSSは、
・テーマエディタ側で有効化することで適用されるCSS
の2種類があります。今回は、後者を設定していきます!
functions.phpを編集する
テーマエディターから、functions.phpを編集していきます。
functions.phpは、WordPressの各種設定をするためのファイルです。
<?php //CSSを有効にする add_theme_support( 'wp-block-style' );
上記のコードを記述します。
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はこちら
★私が「実務プロジェクト」でお仕事をいただいているクライアントのあきらさん(@akira0727x)がYouTubeをはじめました!
Web制作で結果を出すためのノウハウを公開されています✨