WordPress テーマ作成入門

WordPress テーマ作成入門

こんにちは!
今日も頑張ろう

Lesson-3
テーマ作成付帯事項

目次

L3.1 はじめに

L3.1.1 テーマ作成付帯事項

  • WordPress のテーマやプラグイン作成時に必要な付帯事項について説明します。
  • 本ページに記載されていない WordPress の仕様は、関連図書や関連サイトを参照してください。
  • WordPress に関する公式オンラインマニュアルは、以下になります。不明点がある時は以下を参照してください。

参考サイト

本章で説明するのは、以下の付帯事項です。

  1. アクションフック
  2. フィルターフック
  3. ショートコード

L3.2 アクションフック

L3.2.1 アクションフック使用方法

WordPress には、標準の処理を変更するための機能が用意されています。標準の処理を変更するためには、アクションフックやフィルターフックを使用することで標準の処理を変更することができます。

アクションフックとフィルターフックは、似たような機能ですが用途が異なります。アクションフックは、イベント発生時の処理を登録するのに対してフィルターフックは、データを加工する処理を登録します。

アクションフックは、特定のイベントが発生した時の処理を指定します。例えば、ページが読み込まれる時やユーザーがログインを行った時などです。

(1) アクションフック登録(add_action 関数)

add_action 関数は、アクションフックの登録を行います。

add_action( $hook_name, $callback, $priority, $accepted_args )
$hook_name
登録するアクション名を指定します。以下に代表的なアクション名を示します。実際には数百のアクション名が定義されています。詳しいアクション名については「アクション名一覧」を参照してください。
init
WordPress のコア、プラグイン、テーマが読み込まれ WordPress オブジェクトが設定される前に実行されます。初期化の際に実行するカスタムコードを追加するのに適しています。
admin_init
管理画面のページが読み込まれるときに実行されます。管理画面でのみ必要なスクリプトやスタイルシートの登録に使用します。
wp_enqueue_scripts
ページが読み込まれる際にスクリプトやスタイルシートをキューに追加するために使用します。
admin_enqueue_scripts
管理画面のページが読み込まれる際にスクリプトやスタイルシートをキューに追加するために使用します。
wp_head
HTML の head 要素内にメタタグやスクリプトなどを追加するのに適しています。
wp_footer
HTML の body 要素内にスクリプトを出力したい場合に適しています。
save_post
投稿やページが作成、更新されたときに実行されます。カスタムメタデータの保存に便利です。
$callback
イベント発生時に実行する処理関数を指定します。
$priority
複数のアクションフックが登録されている時に実行する順序を指定します。値が小さいほど先に実行されます。省略可能であり初期値は、10 です。
$accepted_args
関数呼び出し時に渡す引数の数を指定します。省略可能であり初期値は、1 です。

テーマやプラグインが読み込まれた後にカスタム投稿タイプやカスタムタクソノミーを登録する場合、init アクションフックを使用します。


function custom_post_type_setup( ) {
	// カスタム投稿タイプを登録するコード
}
add_action( 'init', 'custom_post_type_setup' );

ダッシュボードにカスタム設定ページを追加する場合は、admin_menu アクションフックを使用します。


function my_custom_menu_page( ) {
	add_menu_page(
		'カスタム設定',
		'カスタム設定',
		'manage_options',
		'custom-settings-page',
		'my_custom_settings_page_html',		// この関数内で HTML を出力
		'',
		20
	);
}
add_action( 'admin_menu', 'my_custom_menu_page' );

(2) アクションフック削除(remove_action 関数)

$return = remove_action( $hook_name, $callback, $priority, $accepted_args )
$hook_name
削除するアクション名を指定します。
$callback
削除する処理関数を指定します。
$priority
削除するアクションの順序を指定します。省略可能であり初期値は、10 です。
$accepted_args
関数呼び出し時に渡す引数の数を指定します。省略可能であり初期値は、1 です。
$return
アクションが削除されたか否かを返却します。true は削除が成功を示し、false は削除が失敗したことを示します。

L3.3 フィルターフック

L3.3.1 フィルターフック使用方法

WordPress には、標準の処理を変更するための機能が用意されています。標準の処理を変更するためには、アクションフック(add_action 関数)やフィルターフック(add_filter 関数)を使用することで標準の処理を変更することができます。

アクションフックとフィルターフックは、似たような機能ですが用途が異なります。アクションフックは、イベント発生時の処理を登録するのに対してフィルターフックは、データを加工する処理を登録します。

フィルターフック(add_filter 関数)は、データを加工する時の処理を指定します。例えば、投稿コンテンツを表示する前に加工したりサイトのタイトルを動的に変更したりする場合などです。

(1) フィルターフック登録(add_filter 関数)

add_filter 関数は、フィルターフックの登録を行います。

add_filter( $hook_name, $callback, $priority, $accepted_args )
$hook_name
登録するフィルター名を指定します。以下に代表的なフィルター名を示します。実際には数百のフィルター名が定義されています。詳しいフィルター名については「フィルター名一覧」を参照してください。
the_content
投稿やページのコンテンツが表示される前に適用されるフィルターです。コンテンツの表示をカスタマイズする際に使用します。
the_title
投稿やページのタイトルが表示される前に適用されます。タイトルの出力を変更するのに使用します。
wp_title
<title> タグに表示されるテキストをフィルタリングします。SEO 対策としてページタイトルを調整するのに便利です。
post_thumbnail_html
投稿のサムネイル(アイキャッチ画像)の HTML 出力を変更する際に使用します。
widget_text
テキストウィジェットの内容をフィルタリングする際に使用されます。
body_class
<body> タグに適用される CSS クラスをフィルタリングするために使用します。ページごとに異なるスタイリングを適用するのに便利です。
$callback
データ加工時に実行する処理関数を指定します。
$priority
複数のフィルターフックが登録されている時に実行する順序を指定します。値が小さいほど先に実行されます。省略可能であり初期値は、10 です。
$accepted_args
関数呼び出し時に渡す引数の数を指定します。省略可能であり初期値は、1 です。

投稿の内容に特定のテキストを追加したい場合、the_content フィルターフックを使用します。


function add_signature_to_posts( $content ) {
	$signature = '

ありがとうございました!

'; return $content . $signature; } add_filter( 'the_content', 'add_signature_to_posts' );

サイトのタイトルを動的に変更する場合は、wp_title フィルターフックを使用します。


function modify_wp_title( $title, $sep ) {
	$title .= ' - カスタムテキストを追加';
	return $title;
}
add_filter( 'wp_title', 'modify_wp_title', 10, 2 );

(2) フィルターフック削除(remove_filter 関数)

$return = remove_filter( $hook_name, $callback, $priority, $accepted_args )
$hook_name
削除するフィルター名を指定します。
$callback
削除する処理関数を指定します。
$priority
削除するフィルターの順序を指定します。省略可能であり初期値は、10 です。
$accepted_args
関数呼び出し時に渡す引数の数を指定します。省略可能であり初期値は、1 です。
$return
フィルターが削除されたか否かを返却します。true は削除が成功を示し、false は削除が失敗したことを示します。

L3.4 ショートコード

L3.4.1 ショートコード使用方法

ショートコードとは、投稿や固定ページの中にパーツを埋め込むことができる機能です。ページ内に [ショートコード名] と記述することで登録されているショートコード処理が呼び出され処理内で生成されたコートが埋め込まれます。複数の箇所で使用するパーツや動的に生成したいパーツなどをショートコードとして登録しておくことでページを容易に作成することができます。

(1) ショートコード処理の作成

ショートコード処理は、add_shortcode 関数を用いて登録します。

add_shortcode( $tag, $callback )
$tag
ショートコード名を指定します。
$callback
コールバック関数(ショートコード処理関数)を指定します。。
返却値
ありません。

コールバック関数は、以下のインタフェースで作成します。

function my_shortcode_func( $attr, $content, $tag ) { ... }
$attr
属性の連想配列です。属性が指定されていない場合は、空の文字列になります。
$content
囲みショートコード時の囲まれている文字列です。
$tag
ショートコード名です。複数のショートコードでコールバック関数を共有している場合に、どのショートコードからの呼出しかを判別することができます。
返却値
出力する文字列を返却します。

コールバック関数およびショートコードの登録例は、以下の通りです。


function my_shortcode_func( $atts, $content, $tag ) {

	/* 	ショートコードの処理 */

	rerutn '...';						// ... は作成したコード(出力する文字列)
}
add_shortcode('my_shortcode', 'my_shortcode_func');

(2) ショートコード処理の削除

ショートコード処理は、remove_shortcode 関数を用いて削除します。

remove_shortcode( $tag )
$tag
削除するショートコード名を指定します。
返却値
ありません。

(3) ショートコードの呼出し

ショートコードショートコードを呼び出す時は、WordPress のエディタで次の記述を行います。


[my_shortcode]										// 自己完結ショートコード

[my_shortcode arg="..."]							// 属性付きの自己完結ショートコード

[my_shortcode arg1="..." arg2="..."]				// 複数の属性付きの自己完結ショートコード

[my_shortcode]コンテンツ[/my_shortcode]				// 囲みショートコード

[my_shortcode arg="..."]コンテンツ[/my_shortcode]	// 属性付き囲みショートコード

ブロックエディタを使用している場合は、ショートコードブロックを使用してショートコードの呼出しを行うことも可能です。

(4) PHP コードからショートコードの呼出し

PHP コードからショートコードを呼び出す場合は、do_shortcode 関数を使用します。ヘッダーやフッターの共通テンプレート内でショートコードを使用したい場合などで有用です。

do_shortcode( $content )
$content
ショートコードを [...] の形式で指定します。
返却値
出力する文字列が返却されます。一般的には、echo 関数を使用して出力を行います。

(5) 標準ショートコード

WordPress には、標準で以下のショートコードが登録されています。但し、標準のショートコードが使えるかはテーマに依存します。また、ブロックエディタ(Gutenberg)には標準のショートコードに対応するブロックも用意されていますので、対象のブロックを使用しても同様のコンテンツを作成することができます。

caption
イメージにキャプションを付けます。
audio
オーディオの埋め込みと再生を行います。
video
動画の埋め込みと再生を行います。
playlist
プレイリストを表示する。
embed
埋め込みを囲み最大サイズを指定します。
gallery
ギャラリーを表示します。
(a) caption(イメージにキャプション付与)
[caption]...キャプション[/caption]

以下の属性が使用可能です。

id
画像を囲う div タグ、もしくは figure タグにに id 属性をつけることができます。
class
画像を囲う div タグ、もしくは figure タグにに class 属性をつけることができます。
align
画像の位置を alignnone(指定なし)、aligncenter(中央寄せ)、alignleft(左寄せ)、alignrigh(右寄せ)で指定します。初期値は alignnone です。
width
画像のサイズを指定することができます。
(b) audio(オーディオの埋め込みと再生)
[audio src="パス/ファイル名.wav"]

以下の属性が使用可能です。

src
再生するオーディオファイルを指定します。
mp3
代替用の mp3 形式のオーディオファイルを指定することができます。
m4a
代替用の m4a 形式のオーディオファイルを指定することができます。
ogg
代替用の ogg 形式のオーディオファイルを指定することができます。
wav
代替用の wav 形式のオーディオファイルを指定することができます。
wma
代替用の wma 形式のオーディオファイルを指定することができます。
loop
ループ再生をするかどうかを on(ループ再生をあり)、off(とループ再生なし)で指定します。省略可能で初期値は off です。
autoplay
オーディオを自動的に再生するかどうかを on(自動再生あり)、off(自動再生なし)で指定します。省略可能で初期値は off です。
preload
オーディオの読み込み方法やタイミングを none(ページ読み込み時にオーディオの読み込みなし)、auto(ページ読み込み時にオーディオの読み込みあり)、metadata(ページ読み込み時にメタデータのみ読み込み)で指定します。省略可能で初期値は none です。
(c) video(動画の埋め込みと再生)
[video src="パス/ファイル名.mp4"]

以下の属性が使用可能です。

src
再生する動画ファイルを指定します。
mp4
代替用の mp4 形式の動画ファイルを指定することができます。
m4v
代替用の m4v 形式の動画ファイルを指定することができます。
webm
代替用の webm 形式の動画ファイルを指定することができます。
ogv
代替用の ogv 形式の動画ファイルを指定することができます。
wmv
代替用の wmv 形式の動画ファイルを指定することができます。
flv
代替用の flv 形式の動画ファイルを指定することができます。
poster
再生前に表示する画像を指定します。
loop
ループ再生をするかどうかを on(ループ再生あり)、off(ループ再生なし)で指定します。省略可能で初期値は off です。
autoplay
動画を自動的に再生するかどうかを on(自動再生あり)、off(自動再生なし)で指定します。省略可能で初期値は off です。
preload
動画の読み込み方法やタイミングを none(ページ読み込み時に動画の読み込みなし)auto(ページ読み込み時に動画の読み込みあり)、metadata(ページ読み込み時にメタデータのみ読み込み)で指定します。省略可能で初期値は metadata です。
height
動画サイズの高さを指定します。
width
動画サイズの横幅を指定します。
(d) playlist(プレイリストを表示)
[playlist ids="3239,3237"]

以下の属性が使用可能です。

ids
リストの掲載する ID をカンマで区切って列挙します。
type
プレイリストの種類を audio(オーディオ)、video(動画)で指定します。省略可能で初期値は audio です。
order
再生リストの順序を ASC(昇順)、DESC(降順)で指定します。省略可能で初期値は ASC です。
orderby
再生リストの並び替えを title(タイトル順)、post_date(日付順)、rand(ランダム)で指定します。
id
過去に投稿した記事の ID を指定することで、その記事に使用されたファイルを再生リストにすることができます。本属性は ids オプションが省略された場合に有効です。
ids
再生リストに追加するファイルの ID を指定します。
exclude
再生リストから除外するファイルの ID を指定します。
style
再生リストのスタイルを light(明るく)、dark(暗く)を指定します。省略可能で初期値は light です。
tracklist
トラックリストの表示有無を true(表示)、false(非表示)を指定します。省略可能で初期値は true です。
tracknumbers
トラックナンバーの表示有無を true(表示)、false(非表示)を指定します。省略可能で初期値は true です。
images
サムネイルの表示有無を true(表示)、false(非表示)を指定します。省略可能で初期値は true です。
artists
アーティスト名の表示有無を true(表示)、false(非表示)を指定します。省略可能で初期値は true です。
(e) embed(埋め込みを囲み最大サイズを指定)
[embed width="200px"]https://www.youtube.com/watch?v=2FM9nJUlwEQ[/embed]

以下の属性が使用可能です。

width
横幅を指定します。
height
縦幅を指定します。
(f) gallery(ギャラリーを表示)
[gallery ids="5989,5990,5991"]

以下の属性が使用可能です。

ids
表示する画像 ID をカンマで区切って列挙します。
orderby
画像の表示順を title(タイトル順)、post_date(日付順)、rand(ランダム)を指定します。
order
画像の順序を ASC(昇順)、DESC(降順)で指定します。
columns
カラム数を指定します。0 を指定すると改行タグが挿入されなくなります。
id
過去に投稿した記事の ID を指定することで、その記事に使用された画像からギャラリーを作りことができます。
size
サムネイルのサイズを thumbnail(サムネイルサイズ)、medium(ミディアムサイズ)、large(ラージサイズ)で指定します。省略時は、add_image_size 関数で登録したサイズになります。
itemtag
各項目(画像とキャプション)を囲うタグを指定します。省略可能で初期値は dl タグです。
icontag
各項目の画像を囲むタグを指定します。省略可能で初期値は dt タグです。
captiontag
各項目のキャプションを囲むタグを指定します。省略可能で初期値は dd タグです。
link
画像ファイルをクリックした時のリンク先を指定します。初期値では、画像ファイルのページへのリンクとなっていますが画像への直接リンク(file)かリンクなし(none)かを指定することができます。
include
追加する画像 ID をカンマで区切って列挙します。
exclude
削除する 画像ID をカンマで区切って列挙します。

Copyright© 2022-2026 情報デザイン工房 濱屋 All Rights Reserved.