「css/html」の記事一覧

wp_enqueue_style関数とは Wordpressの関数を知りたいと思った時、まずはWordPress Codex 日本語版などを参照して調べるのが必定だと思います。 となれば、この「wp_enqueue_style」関数についても、「関数リファレンス/wp enqueue style」のページを確認すれば良いだけ……ではありますが、いざ理解しようと思った時にドツボにはまってしまいました。自己学習の備忘録として、このような記事を残したいと思います。 どのように使うのか？ WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。 関数リファレンス/wp enqueue styleより 不勉強なもので、どうにもこの手の解説はピンとこないのですが……。方式に従って指定した「スタイルシートファイル」を、処理のためにキューに入れる（読み込む）、という理解です。（意味の捉え違いなどがありましたら申し訳ありません） 形式は、下記の通りです。引数が5個あります。 wp_enqueue_style( $handle, $src, $deps, $ver, $media ); 引数の説明はcodexを見て頂ければと思いますが、下記が、自分なりに内容をかみ砕いたものです。理解が至らず、説明内容に誤りがある可能性があるので、その点はご容赦頂ければ幸いです。 $handle cssファイルのハンドル（識別名）を指定する。必須項目。 $src cssファイルのURLを指定する。オプション項目。wordpressがcssファイルを認識している場合は指定不要。絶対パス・相対パス・関数などで指定可能。 $deps 今回扱うcssファイルが依存する、他のcssファイルのハンドル（識別名）を指定する。オプション項目。「扱うcssが他のcssに依存する（読み込みの順序がある）」という場合に、「先に読み込んで欲しいcss」として指定する。指定方法は「array('読み込んで欲しいcssのハンドル名')」で、複数のハンドルを同時に指定可能。なお、指定しなくても動作することも多いようですが、「親テーマの後に子テーマを読み込む」という原則があるので、意識した方が良いと思われます。 $ver cssファイルのバージョン番号を指定する。オプション項目。バージョン番号とは、環境に応じて自動あるいは手動で付与されるもの。特にバージョン番号を意識しない場合は、指定しなくても問題ない。 $media cssファイルが定義されているメディアを指定する。オプション項目。デフォルトでは「all」が設定されているため、特に指定しなくても問題はない。 具体的な使い道は？ さて、そもそもこの関数はどのような用途で求められるのか。勿論、様々なケースでの利用が想定されることでしょう。 ところが実は、wordpressの子テーマを作る場合に、必ず用いる関数であるとなっています。WordPress Codexの「子テーマ」ページにも、その旨が記載されています。 かつて子テーマを作る時は、「cssファイルに、@importを使って親テーマを記述する」という手法が一般的（？）に用いられていたかと思います（僕もそのやり方に倣っていました）。が、いつ頃からか、これが動作上の問題点などが判明して非推奨となり、新たにこの関数を使った方法が推奨となったようです。 さて、そんなことは露知らずだった僕がこの関数と出会ったきっかけは、「記事ごとに設定されているアイキャッチ（サムネイル）画像を、同一のページ内の任意の箇所に、背景画像として表示させたい」と考えたことにあります。 背景画像として出力するためには、「cssにbackground-imageで画像のURLを指定する」必要があります。しかし、ページごとにアイキャッチ画像（のURL）は異なります。つまりページごとに指定すべきURLを取得し、cssファイルに対し、追加で書き込まなければならない。……さて、どうしたものか？ といった発案から様々なブログ等を拝見した結果、この関数に行きつきました。ところが、なかなか扱い方が分からず、「ハンドル？なに？」と戸惑ってしまい、それを整理したのが今回の記事です。次は、テストを交えつつさらに関数の詳細を確認したいと思います。 2017/2/15 追記：【wordpress】wp_enqueue_style関数で子テーマのcssを読み込む

ほ〜らく奉行所

「css/html」の記事一覧

容量が大きな動画をWordPressで直接公開する

特定カテゴリに限定して、アイキャッチ画像の代わりに記事内最初の画像を表示させる

【WordPress】テンプレートテーマ「conica」をいじった備忘録

【WordPress初心者向け】ヘッダー画像を"とりあえず"用意する

【WordPress初心者向け】CSSなどにおける改行・空白の考え方

【WP初心者向け】固定フロントページを利用する場合のAll in One SEO Packに関する疑問

【WP初心者向け】WordPressのパーマリンクとは（前編）

【wordpress】wp_enqueue_style関数で子テーマのcssを読み込む

【wordpress】wp_enqueue_style関数をゼロから学ぶ