科学/IT

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)....

-科学/IT

執筆者:


comment

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

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

関連記事

WordPressにBootstrapを導入方法の手順について書いてみました1

皆さん、今日は。これからWordPressを使ってブログを創るため、やっぱりきれいな見栄えのいいブログにしたいですよね。 それで、実際に自分でWordPressでBootstrapを使えるようにしてみ …

ペルセウス座流星群2018!方角や日時や山梨県の穴場はどこ?

皆さんこんにちは。 流れ星を見た時に、それが消える前に 3回願い事をすると、 その願い事が叶うと聞いたことがありますが なかなか、3回も願いこどを唱えるのは難しいですね。 ところで、このような言い伝え …

レイ・カーツワイルが予測する未来から考える!人工知能(AI)の未来は衝撃的!

最近、Facebookをみてますと、レイ・カーツワイルや人工知能の話が良く出てきます。 とっても興味が出ましたので、 彼が考えた技術的特異点からAI(artificial intelligence/A …

ペルセウス座流星群2018!方角や観測日時・ピークは?

皆さんこんにちは。 流れ星を夜空に見つけたら、三回願い事をすると叶うといわれています。 そう言われる理由は、流れ星を見つけるのは非常にレアーだからですね。 しかし、1年の間で、たくさんの流れ星を見れる …

ペルセウス座流星群2018!方角や日時や栃木県の穴場はどこ?

皆さんこんにちは。 夜空をぼーっと観ていたら、 突然スーッと光るものが飛んで消えていった! 「あ、あれは流れ星?」 という経験ありませんか? 飛んで消える流れ星を見かけたら 3回願い事をすると、 その …

スポンサードリンク