WordPressの開発で大切なこと #2/2

2023.10.01 Wordoressの開発で大切なこと

はじめに

概要

以下の内容は、WordPressの開発において知っておくべき重要な情報です。WordPressのデフォルトの設定を把握することで、デザインの崩れを回避することができたり、コードの管理がしやすくなったりして非常に便利です。まずはこの内容を理解することから始めましょう。

目的

自動Pタグの設定
エディタ内ではWordpressの関数が使用できない
functionsファイルの分割
自動リロードによる開発
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

自動Pタグの設定

WordPressのエディタは、コンテンツを作成や編集する際に、利便性と構造を提供するために自動的にパラグラフPタグを追加します。これは特にビジュアルエディタで顕著で、ユーザがテキストを入力すると、各パラグラフには自動的にPタグが追加され、テキストが整形されます。

自動Pタグを制御する方法

wpautop関数の無効化: functions.phpファイルに以下のコードを追加することで、自動Pタグの生成を停止できます。

functions.php

remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');

ただし、これにより全ての投稿やページで自動Pタグが無効化されるため、必要に応じて制御してください。

注意点
自動Pタグの無効化は、コンテンツの表示やスタイリングに影響を与える可能性があります。特に既存のコンテンツは、Pタグなしで表示されるとフォーマットが崩れることがあります。
安易に自動Pタグを無効化するのではなく、それが必要なケースでのみ行うことをお勧めします。
自動Pタグに関するさらなる情報やカスタマイズ方法については、WordPressの公式ドキュメントや関連フォーラムを参照してください。

エディタ内ではWordpressの関数が使用できない

WordPressのエディタ内（グーテンベルクエディタやクラシックエディタ）で直接PHPコードやWordPress関数を実行することはできません。これはセキュリティリスクを低減し、エディタの安定性を保つための設計です。こちらのエディタでWordpressの関数を使用するにはショートコードを作成し、呼び出す必要があります。ショートコードについてはこちらを参照ください。

なお、VSCode内で使用するには以下のように記述します。

echo do_shortcode('[my_shortcode]');

注意点

開発環境のセットアップと本番環境へのデプロイは、緊密に連携したプロセスです。WordPress関数を活用して動的にパスを取得することは必須です。これは、ドメインが変わった際にも柔軟に対応でき、サイト表示の問題を避けるためです。

固定ページの編集はテキストエディタで行われることが一般的で、その際にもショートコードを利用することが重要です。これにより、WordPressの関数を通じてパスを正確に取得でき、サイトの動作がスムーズになります。

functionsファイルの分割

locate_template関数

locate_template関数は、WordPressにおいてテンプレートファイルの場所を特定する関数です。この関数は指定されたテンプレートファイルが子テーマまたは親テーマのどちらに存在するかを確認し、最初に見つかったテンプレートファイルのパスを返します。この関数は、functions.phpファイルを分割して管理する際に有用です。

functions.phpファイルが大きくなりすぎると、コードの管理が難しくなることがあります。この問題を解決するために、関数や機能を分割して個別のファイルに配置し、functions.phpからそれらのファイルを読み込むことができます。

以下に、locate_template関数を使った一例を示します：

function load_function_files() {
    // locate_templateの引数として、読み込みたいファイルの配列を渡します
    // 第二引数をtrueに設定すると、テンプレートファイルを読み込みます
    // 第三引数をtrueに設定すると、読み込んだテンプレートファイルのパスを返します
    locate_template( array('inc/function-part1.php', 'inc/function-part2.php'), true, true );
}
add_action('after_setup_theme', 'load_function_files');

コードの説明

load_function_files 関数を作成して、読み込みたい機能ファイルの配列を locate_template 関数に渡します。

locate_template 関数の第二引数に true を設定して、テンプレートファイルを読み込みます。

locate_template 関数の第三引数に true を設定して、読み込んだテンプレートファイルのパスを返させます。

add_action 関数を使用して、after_setup_theme アクションフックに load_function_files 関数を接続します。これにより、テーマのセットアップ後に load_function_files 関数が実行されます。

この方法で、functions.phpを整理しやすくして、コードの管理がしやすくなります。各分割ファイルには特定の機能や関数をまとめ、必要に応じて読み込むことができます。

shortcode.php
menu.php
setup.php
error.php

などに分割し、管理することが可能です。

自動リロードによる開発

開発環境において、記述した内容がリアルタイムで反映される環境を構築することは、効率的な開発のために重要です。VScodeのLive Serverは、そのような環境を提供するツールの一つですが、WordPress開発には直接使用できません。WordPress開発では、サーバーを起動して動作を確認しながら作業を進める必要があります。node.jsはサーバーサイドJavaScript環境であり、WordPressと連携することもできます。自動リロードの開発の詳細についてはこちらを参照ください。

まとめ