コンピューター 毎日の日記

WordPressにBootstrapを導入方法の手順4〜functions.php編

投稿日:2017年7月8日 更新日:

この記事は、「WordPressにBootstrapを導入方法の手順について書いてみました3」の続きです。

 

みなさんこんにちは。今日は、WordPressの初期処理で使用するfunctions.phpファイルの説明を書いていきたいと思います。このファイルではPHP言語を使用します。なかなか難しいかと思いますが、最初は要所要所を抑えつつ、理解していくといいと思います。

頑張りましょうね。

 

Advertisements

スポンサードリンク.(Sponsored Link)

1. function.phpの説明

  • このファイルは、WordPressの初期化処理で、スタイルシートやjsファイルをプログラムで読み込むのに使用します。htmlファイルの中に<link>タグを使用してスタイルシートやjsファイルを読み込む処理を記述することも出来ますが、外部ファイルfunctions.phpでその処理をしたほうがメンテナンス性が良くなります。読み込むファイルが変更になったり、バージョンが変わったりした場合には、functions.phpの中の記述だけを修正すれば良く、html自体はそのままですみます。
  • 保存する場所は、〈wp-content/themes〉の下に作成したテーマ用サブフォルダです。
  • 〈wp-content/themes〉配下に作成したオリジナルテーマのフォルダの中にstyle.cssとindex.phpファイルを保存すると、WordPressが自動的にこのテーマをオリジナルテーマとして有効化にし、認識します。
  • function.phpは、保存されているフォルダのテーマにのみ機能し、他のテーマには影響を与えません。
  • functions.phpは、多くの違った処理を記載することが出来ます。

2. functions.phpを編集する

まずは、function.phpを作成して、
〈/(ブログのドメイン)/public_html/wp-content/themes/mynewtheme〉フォルダにアップします。

function.phpの中身は以下のような内容になります。

(1) mybootstrap_enqueue_styles関数の説明

 wp_register_style関数の使い方

WordPressのテーマにCSSスタイルファイルを読み込みます。

構文

wp_register_style( $handle, $src, $deps, $ver, $media );

 引数の説明

引数名 データタイプ 必須項目 説明 初期値値
$handle string  スタイルシートのハンドルネーム
$src string スタイルシートのURL  ”
$deps array  このスタイルシートが依存するスタイルシートのハンドルネーム配列  array()
$ver string|bool|null 記載すると、cssのURLの最後にバージョン番号が付きます。無しの場合、WordPressのバージョン番号が付きます。バージョン番号を付与しない場合は、NULLを書きます。  false
$media string  スタイルシートに適用するメディアを指定する  all
 handle  名前、あだ名、ニックネームなどの意味があります。
 $src  スタイルシートの完全なURL、または、WordPressのルートディレクトリーからのスタイルシートの相対パス。
 $deps  登録するスタイルシートの前にlinkタグで読み込まれなくてはいけないベースになるスタイルシートのニックネーム配列になります。依存先のスタイルシートが無い場合、値はfalseにします。
 $ver
 $meida  適用するメディアを指定します。
media属性は、リンク先の文書または読み込むリソースを、どのメディアに適用するのかを指定します。media属性の値は適切なメディアクエリでないといけません。省略時は、allが自動的にセットされます。特に指定する必要がない場合は、指定する必要はありません。

 

Sponsored Link

 

 get_template_directory_uri()

テンプレートのあるディレクトリ URIを取得します。

 wp_enqueue_style関数の使い方

WordPressに対してCSSを wp_register_style() で登録したあとに、CSSスタイルファイルをキューに追加するのに使用します。

 構 文

wp_enqueue_style( $handle, $src, $deps, $ver, $in_footer );

 引数の説明

引数名 データタイプ 必須項目 説明 初期値
$handle string  スタイルシートのハンドル
$src string スタイルシートのURL  ”
$deps array  このスタイルシートが依存するスタイルシートのハンドルの配列  array()
$ver string|bool|null 記載すると、cssのURLの最後にバージョン番号が付きます。無しの場合、WordPressのバージョン番号が付きます。バージョン番号を付与しない場合は、NULLを書きます。  false
$in_footer bool  true: スタイルが</body>の直前で読み込まれる。false: スタイルが</head>の直前で読み込まれる。  false

(2) mybootstrap_enqueue_scripts関数の説明

mybootstrap_enqueue_scriptsの処理は、mybootstrap_enqueue_stylesよりも簡単です。

なぜなら、scriptsの方では、jQueryはWordPressでデフォルトでインストールされているので、ここでは、jQueryをregister(登録)する必要はありません。

そこで、直ぐに、ハンドル配列 $dependencies に array(‘jquery’) を配列の形でセットして、wp_enqueue_scriptでWordPressに対してオリジナルのテーマをキューに追加する処理を実行しています。

 wp_enqueue_script関数の使い方

WordPressに対してスクリプトをキューに追加します。

 構 文

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

 引数の説明

引数名 データタイプ 必須項目 説明 初期値
$handle string  スタイルシートのハンドル
$src string スタイルシートのURL  ”
$deps array  このスタイルシートが依存するスタイルシートのハンドルの配列  array()
$ver string|bool|null 記載すると、cssのURLの最後にバージョン番号が付きます。無しの場合、WordPressのバージョン番号が付きます。バージョン番号を付与しない場合は、NULLを書きます。  false
$in_footer bool  true: スタイルが</body>の直前で読み込まれる。false: スタイルが</head>の直前で読み込まれる。  false

(3) add_actionの説明

特定のアクションに関数をフックします。フックする関数の定義の後に、add_actionを記述します。

特定のアクションとは、WordPressには予め決まったアクションが有り、その複数のアクションの中で、自作した関数の実行を登録するアクションのことです。

言い換えれば、画面のプログラミングなどで、イベント・ドリブンのプログラミング開発をしますが、add_actionは、それと似たものです。actionドリブンのプログラミングと言えば良いでしょうか。

そのアクションの一覧は、こちらです。自分がしたい処理に適切なアクションを使います。今回のスタイルやJSのファイルの登録・キュー追加の処理は、’wp_enqueue_scripts’ というアクションを使用します。

 構 文

 引数の説明

 

引数名 データタイプ 必須項目 説明 初期値
$hook string オリジナル関数名がフックされるWordPressのデフォルトのアクション名
$function_to
_add
string (WordPressのデフォルトのアクションに)追加するオリジナルの関数名。
$priority integer アクションに追加している関数の実行順を整数で指定する。同じ数で指定した場合、アクションに追加された順に実行。  10
$accepted_args integer フックした関数がアクションから受け入れる引数の数 1
hook; 入力・出力などに伴うデータの流れを監視して、通常と違う独自処理を行うために予約する仕組み

 

★この記事を書くのに以下のサイトを参考にしました

スポンサード・リンク (Sponsored Link)....

-コンピューター, 毎日の日記

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

フクロウの飼い方!旅行や鳴き声対策は?フリーフライトは?

皆さんこんにちは。この記事は、「フクロウの習性やサイズや餌は?ひよこだけでは栄養不足?」の続きになりますので、もし、「フクロウの習性やサイズや餌は?ひよこだけでは栄養不足?」を読んでない方は先にこちら …

カフェインが健康に良い点悪い点についての色々レポート

昔は、コーヒーが体にわるいからあまり飲まない方が良いと良く言われましたが、最近、コーヒーは実は健康に良いという記事を見かけます。 私はコーヒーはいつも毎日飲んでますが、実際のところどうなんでしょうか。 …

コロナワクチン2回摂取後の副反応の事例をTwitterで見てみた!

皆さん、こんにちは。 新型567枠沈の副反応について、一体、周囲の人たちがどんな体験をしているのか知りたくて、Twitterでその事例を探したので紹介します。     目 次1 新 …

1週間断食7日目!体重や飲み物・体調の変化は?おすすめの商品は?

皆さん、こんにちは。 今日はいよいよ1週間断食の最終日です! 昨日までは、体調がきつかったり一大事件(?)が 勃発したりで、本当に大変だったですね。 今日はどんな1日にるでしょうか? 内容の概略は 体 …

さいたま新都心けやきひろばイルミ2018-2019!開催日時や見どころは?

  皆さん、もうすぐクリスマスが近づいてきますが クリスマスといえば、やはり、イルミネーションですね。 埼玉エリアでは、やはり、 さいたま新都心けやきひろばのイルミネーションが知られています …

スポンサードリンク