科学/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

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

関連記事

AI人工知能を搭載の自動運転車の研究と将来1

最近良くAI(人工知能)のことが言われていますが、そのAIが普及するにつれいろんな業界で、AIを使った新しい技術開発が進んでいますね。その中で、自動運転車の開発も注目すべき開発になります。今回は自動運 …

Mac High SierraにMySQLをインストール

皆さんこんにちは。 今日は、MacOS High SierraにMySQLを入れた手順を紹介します。   目 次1 MySQLのインストール1.1 インストール1.2 MySQLの起動2 R …

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

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

10~20年後の未来を予測~超薄型繊維で電圧を生成する新技術から未来を予測!

皆さんこんにちは。10年後の未来がどうなるのか・・・ 「人工知能(AI)の普及で10年後~20年後の社会はどう変わるか?」 この記事を書いてみて思うのは 今の科学の発達の仕方をみてみると、 10年後~ …

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

  これは「WordPressにBootstrapを導入方法の手順について書いてみました2」の続きです。   前回は、オリジナルテーマのフォルダ 〈public_html/wp-c …

スポンサードリンク