便利なプラグイン
WP Multibyte Patch
Show Current Template
テンプレートタグ
テンプレートタグとはWordPressで用意されたカスタマイズするためのPHPの関数です
home_url()
現在のブログのホームURLを返します。
無害化(サニタイズ)を行う必要があります。
echo esc_url( home_url() );
the_content();
現在の投稿ページの本文を出力します。このテンプレートタグはWordPressループの中で使わなければなりません。
single.phpなど個別の投稿記事ページで管理画面で入力した本文を表示させるために使います。使い方は、テンプレートファイル(single.phpなど)の表示させたい箇所でWordPressループさせて表示させます。
get_template_part($slug, $name, $args)
header.php、footer.php、sidebar.phpなどを除いたテンプレートファイルを読み込みます。
wp_head();
wp_headアクションをスタートさせます。(アクションフックを登録する関数) テーマテンプレートファイル内の</head>タグの直前で使います。
このテンプレートタグがなければhead内に必要な情報が出力されません。スタイルシートJavaScriptが読み込まれなかったりします。
wp_footer();
wp_footerアクションフックをスタートさせます。 テーマテンプレートファイル内の</body>タグの直前で使う。</body>タグの直前に記述します。 このテンプレートタグがなければ、ログイン中にサイト上部に管理バーが表示ず、またスクリプトがエラーになったりします。
bloginfo( );
bloginfo( 'name' ); // サイトタイトル出力
bloginfo( 'description' ); // キャッチフレーズ出力
wp_nav_menu();
管理画面で設定したナビゲーションメニューを表示します。 このテンプレートタグで出力されるメニューは「管理画面→外観→メニュー」で作成できます。
<?php
wp_nav_menu(
array(
'theme_location' => 'top',
'menu_id' => 'top-menu',
'container' => 'nav',
'container_class' => 'header-navigation-container',
)
);
?>
キー | 説明 |
---|---|
theme_location | メニューを構成するul 要素に適用するID |
menu_id | register_nav_menu()やregister_nav_menus()で設定したテーマの中で使われる位置 |
container | メニューを囲むコンテナのタグを変更 |
container_class | メニューを囲むコンテナのクラスを変更 |
オリジナルテーマ作成手順
テーマユニットテスト
様々なテスト用データをインストールできる
フック
「特定のタイミング」で「外部からの処理を追加できる」ようにするもの
- 特定のタイミング → WordPress本体やテーマ、プラグインが用意してくれている。
- 外部からの処理
- 関数を実行 … アクションフック
- 変数を上書き … フィルターフック
アクションフック
処理を追加するときに使います。WordPressの処理のタイミングで作成した処理を割り込ませることができます。
do_action
でフックを設置し、add_action
でそのフックに処理を追加する
add_action
<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>
add_action( 'フックさせたい場所の名前', '呼び出してほしい関数名', 優先順位(省略可能),引数の数(省略可能) );
フィルターフック
データベースに追加する前やブラウザに表示する前などに、様々な形のテキストをカスタマイズするためのフックです。
apply_filters
でフックを設置し、add_filter
でそのフックに処理を追加する
既存のテーマの子テーマによるカスタマイズ
1からテーマを作成するより、子テーマによるカスタマイズのほうがよい理由がいくつかあります。
- WordPressの多くの機能を把握しておく必要がない(関数など)
- 毎回のアップデート影響をうけず、親テーマにまかせることができる
上記の観点から、親テーマの選定は長期で使われていて、アップデートを頻繁にしているものがよいといえます。
親テーマより小テーマのテンプレートファイルが優先して読み込まれる
小テーマがある場合WordPressは小テーマでファイルを探し、なければ親テーマのファイルを読み込みます。※functions.phpは上書きではなく子→親両ファイル読み込みます
例えばヘッダー部分をカスタマイズしたい場合親テーマのheader.phpを小テーマのディレクトリに複製して内容を書き換えます。
Lightningの子テーマカスタマイズ
▼フォルダ構成
- lightning-child
- style.css
- functions.php
- assets
- css
- style.css
- css
- _g3
- template-parts
- site-header.php
- template-parts
style.css
/*
Theme Name: lightning Child
Template: lightning
*/
functions.php
<?php
add_action('wp_head', function() {
?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<?php
});
add_action(
'wp_enqueue_scripts', function() {
wp_enqueue_style('parent-style', get_template_directory_uri() .'/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() .'/assets/css/style.css', array('parent-style'), date("ymdHis", filemtime( get_stylesheet_directory() .'/style.css')));
}
);
Lightning ヘッダーカスタマイズ
実現したいこと画面上部追従、ロゴは中央
_g2/header.phpを作成し編集
参考サイト:https://qiita.com/healing_code/items/1be7ca44b4a5b63436b7
今回のケースでは上記テンプレートファイルではなく、_g3/template-parts/site-header.phpでした
Lightning ヘッダー設定
- ヘッダーレイアウト →中央揃え
- グローバルナビスクロール時のレイアウト →固定しない
Lightning ハンバーガーメニューカスタマイズ
Lightningのハンバーガーメニューは画像
特定のページのみCSS/JSファイルを読み込ませる方法
add_action( 'wp_enqueue_scripts', function(){
// トップページにだけCSSファイルを追加
if( is_front_page() ){
wp_enqueue_style(
'front',
get_template_directory_uri() . '/assets/css/front.min.css',
array(),
''
);
}
// 投稿IDが30のページにのみJSファイルを追加
if(is_page(30)){
wp_enqueue_script(
'page30js',
get_template_directory_uri() . '/assets/js/page30.js',
array(),
array(),
true
);
}
}
特定の固定ページだけ処理をする方法
function getPostList(){
// 検索条件の登録
$arg = [
'posts_per_page' => 20,
'order' => 'ASC',
'post_status' => 'publish'
];
$queryObject = new WP_Query($arg);
// 取得した投稿一覧はpostsに格納されている
return $queryObject->posts;
}
// 取得した記事一覧をループさせ、HTML化
foreach(getPostList() as $post){
~...
// 投稿名
$post->post_title;
// 本文
$post->post_content;
トラブル
エラーの種類
Error エラー | 構文がおかしかったり、関数名が重複している場合になるエラー エラーになった時点でプログラムは停止する |
Warning 警告 | 引数が足りない場合等になるエラー プログラムは動作しているが、正常に動作していない可能性が高い |
Notice 注意 | 未定義の関数の使用など、軽微な問題 プログラムは動作しているが、正常に動作していない可能性が高い |
デバッグモード
WordPressはデフォルトでエラーメッセージを出力しない設定となっていますが、デバッグモードを有効にすることで表示することができます。
define( 'WP_DEBUG', false );
↓
define( 'WP_DEBUG', true );
よくある内容
(構文がおかしいときに発生)
Parse error: syntax error, unexpected ○○ in ファイル名 on line 行数
(関数が未定義のときに発生)
Fatal error: Call to undefined function 関数名() in ファイル名 on line 行数
(同じ関数名で関数を定義したときに発生)
Fatal error: Cannot redeclare 関数名() (previously declared in ファイル名 on line 行数A) in ファイル名 on line 行数B
(変数が未定義のときに発生)
Notice: Undefined variable: 変数名 ~ in ファイル名 on line 行数