さて、昨日は style.cssを触ってみましたが、いつもだったらリセットCSS は別の CSS ファイルとして外部読み込みするよなぁと思ったものの、Underscores の style.css はそのまま含まれていたので、同じ様にペタリとしてしまったのですが、考えてみたらスターターなんだから、とにかくシンプルになっているのが当たり前だよなぁと思い、他のテーマはどうなっているんだろうと気になり出しました（おおう、前回の空きっぷりとは打って変わって連日の更新です）
早速、現在公式のデフォルトテーマになっている「Twenty Twenty」を見てみましょう。
/* -------------------------------------------------------------------------- */
/* 0. CSS Reset
/* -------------------------------------------------------------------------- */
html,
body {
border: none;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
border: none;
font-size: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: inherit;
}
blockquote::before,
blockquote::after {
content: "";
}ううむ… シンプルイズベストですな。
でも、リセット部分を直書きしちゃってるよね。うーむ。
そうだ！ 今使っている、とある有料テーマを見てみよっと。早速 style.css を見てみるとテーマについての情報しかありません。何処かなぁと中を見ていくと「assets」ディレクトリを見つけて、いそいそと中を見てみました。
Oh… 圧縮されていてとても読む気になれません（まぁそりゃ当然ですよね）そっとVSCodeを閉じます。
何処かにお手本になるテーマはないかなぁと幾つか見ていくと、スタータテーマとして Underscores を使用して作られたという「BusinessPress」と言うめっちゃオシャレなテーマを見つけました！ しかも「Gutenberg対応」との事。
これはもしかしてもしかするかもと逸る気持ちを抑えつつ、早速テーマを見てみます。
いやー、とてもキレイ。早速こちらのテーマで勉強させて頂こうと、style.css を見てみます。うーん。リセットの類がありませんね。ではとテーマを有効化してからソースを拝見。あれっ、どっかで Normalize.css が当たってるよ？ うーん。header で読み込んでるのかな？とheader.php を見てみても見当たらない…。うーむ。じゃあ functions.phpかしら？ あったあったありました。wp_enqueue_style と言う関数へ引数の形で渡されていました。
ほー。これが WordPress のお作法というやつかしら…。早速調べてみましょう。wp_enqueue_style で Google で検索してみると、一番最初に「関数リファレンス/wp enqueue style – WordPress Codex 日本 …」と出てきます。
説明
WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。wp_register_style() で予め登録されていれば、そのハンドルを使って追加できます。
関数リファレンス/wp enqueue style
なるほど！ まさに探していたモノでした。やっぱりドキュメント大事！ では早速 functions.php を修正してみましょう。
と、その前に使用例を見てみます。
ひとつのアクションフックからスクリプトとスタイルを読み込む。
数リファレンス/wp enqueue style
/**
* スクリプトとスタイルを適切にエンキューする方法
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );ほー。これは恐らく theme_name_scripts() という自作の関数を add_action () という関数で呼び出している様ですね。そもそも add_action() とは何なのかを調べてみます。先ほどの「Codex:WordPress Codex 日本語版」で検索してみましょう。「関数リファレンス」というページに辿り着きました。うーむ。凄いですね。これだけ日本語でキチンとドキュメントが読めるなんてステキですね。今時はみんなこうなのでしょうか？ 先人のご努力に感謝しつつ add_action() を探します。
ありました「関数リファレンス/add action」早速見てみましょう。
説明
特定のアクションに関数をフックします。
この関数は add_filter() のエイリアスです。
アクションフックの一覧についてはアクションフック一覧をご覧ください。アクションは（通常は）WordPress コアが do_action() を呼び出すときにトリガーされます。
「特定のアクションに関数をフックします。」 アクション？ もう一段掘ってみましょう。
アクション
WordPressでのアクションは WordPress コアにより特定の場所で実行される PHP 関数 を指す。
開発者は、既存のアクションに対して、任意の既存のフックを指定し、アクションAPI を使用してコードを追加、削除し、カスタム アクションを作成できる。このプロセスは “フック” と呼ばれる。
例えば、開発者がテーマのフッターにコードを追加する場合、新しい関数を書き、wp_footer アクションにフックすればよい。
カスタムアクションとカスタムフィルター は異なるので注意。 カスタムアクションが既存のアクションに対してコードを追加または削除するのに対し、カスタムフィルターでは既存のアクション内に存在する変数などのような特定のデータを置換する。
用語集
うーむ。どうやら元々備わっている関数が実行される際に、自分で作成した関数を引っ掛けて実行してもらう感じですかね。
もう一度、実際の実装例を見てみましょう。
function businesspress_scripts() {
wp_enqueue_style( 'fontawesome', get_theme_file_uri( '/inc/font-awesome/css/font-awesome.css' ), array(), '4.7.0' );
wp_enqueue_style( 'normalize', get_theme_file_uri( '/css/normalize.css' ), array(), '8.0.0' );
wp_enqueue_style( 'businesspress-style', get_stylesheet_uri(), array(), '1.0.0' );
wp_enqueue_script( 'fitvids', get_theme_file_uri( '/js/jquery.fitvids.js' ), array(), '1.1', true );
if ( is_home() && ! is_paged() && get_theme_mod( 'businesspress_enable_featured_slider' ) ) {
wp_enqueue_script( 'slick', get_theme_file_uri( '/js/slick.js' ), array( 'jquery' ), '1.9.0', true );
wp_enqueue_style( 'slick-style', get_theme_file_uri( '/css/slick.css' ), array(), '1.9.0' );
}
if ( is_active_sidebar( 'sidebar-1-s' ) || is_active_sidebar( 'sidebar-page-s' ) ) {
wp_enqueue_script( 'stickyfill', get_theme_file_uri( '/js/stickyfill.js' ), array( 'jquery' ), '2.1.0' );
}
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
wp_enqueue_script( 'businesspress-functions', get_theme_file_uri( '/js/functions.js' ), array( 'jquery' ), '20180907', true );
wp_enqueue_script( 'businesspress-navigation', get_theme_file_uri( '/js/navigation.js' ), array( 'jquery' ), '1.0.0', true );
$businesspress_l10n = array();
$businesspress_l10n['expand'] = __( 'Expand child menu', 'businesspress' );
$businesspress_l10n['collapse'] = __( 'Collapse child menu', 'businesspress' );
wp_localize_script( 'businesspress-navigation', 'businesspressScreenReaderText', $businesspress_l10n );
wp_enqueue_script( 'businesspress-skip-link-focus-fix', get_theme_file_uri( '/js/skip-link-focus-fix.js' ), array(), '20160525', true );
}
add_action( 'wp_enqueue_scripts', 'businesspress_scripts' );ふむふむ。では早速やってみましょう。
まずは flair （あっ、この間 Underscores で作った研究用テーマの名前ね）の style.css に昨日追加した destyle.css を削除します。そして新たに destyle.css を作成します。
さあ、ここからがいよいよ本番ですね。functions.php を修正します。 って、あれ？ 何だか知らんけど既に /* Enqueue scripts and styles. があるよ…。これが Underscores さんのありがたみなのかな…。
function flair_scripts() {
wp_enqueue_style( 'flair-style', get_stylesheet_uri(), array(), _S_VERSION );
wp_style_add_data( 'flair-style', 'rtl', 'replace' );
wp_enqueue_script( 'flair-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'flair_scripts' );もう一度、wp_register_style() を確認します。
<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>すると、引数になっている「$handle, $src」の二つだけが必須項目の様なので、取り敢えずこの部分だけ入れて、次の様に修正します。
function flair_scripts() {
wp_enqueue_style( 'destyle.css', get_theme_file_uri( '/css/destyle.css' ) );
wp_enqueue_style( 'flair-style', get_stylesheet_uri(), array(), _S_VERSION );
wp_style_add_data( 'flair-style', 'rtl', 'replace' );
wp_enqueue_script( 'flair-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'flair_scripts' );では早速。でやっ
おおう。無事に読み込まれています。
ふぅー。今回はノートラブルでフィニッシュです（珍しいこともあるもんだ…）
コメント