WordPress自作、カスタマイズ

便利なプラグイン

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',
    )
  );
?>

オリジナルテーマ作成手順

テーマユニットテスト

様々なテスト用データをインストールできる

フック

「特定のタイミング」で「外部からの処理を追加できる」ようにするもの

• 特定のタイミング　→　WordPress本体やテーマ、プラグインが用意してくれている。
• 外部からの処理
  1. 関数を実行　…　アクションフック
  2. 変数を上書き　…　フィルターフック

アクションフック

処理を追加するときに使います。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
  • _g3
    • template-parts
      • site-header.php

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のハンバーガーメニューは画像

参考サイト：https://wordpress.org/support/topic/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B_g3%E3%80%81inc%E5%86%85%E3%81%AEvk-mobile-nav%E6%94%B9%E5%A4%89%E5%8F%8D%E6%98%A0%E3%81%AE%E4%BB%B6/

特定のページのみ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;

トラブル

エラーの種類

デバッグモード

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 行数