この記事ではWordpressで

記事情報をCSV出力するボタンを投稿一覧画面に設置する方法

をご紹介します。

作成するボタン（イメージ）

ケケンタ

今回ご紹介するソースコードを利用することで、記事ごとの記事IDやURLを一覧で出力することができます！

また、今回は「記事一覧情報をCSV出力する」という具体的な目的にそった内容となっていますが、当記事の内容を理解することでWordPressの管理画面上でフォーム送信処理を安全に書くことができるようになります。

ぜひ最後までご覧いただければ幸いです！

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【結論】ソースコード

今回使用するファイルはfunctions.phpのみです。

以下のソースコードをfunctions.phpに記述するだけで「記事の一覧情報をCSV出力するボタン」を投稿一覧画面に表示できます。

ソースコード（functions.php）

/**
 * CSVファイルを生成して出力する。
 */
function createCsvPostList()
{
	if (isset($_POST['csv-output']) && $_POST['csv-output'] === 'true') {
		// セキュリティチェック
		if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'csv-output-action')) {
			wp_die('セキュリティチェックに失敗しました。');
		}

		// CSVファイル名
		$file_name = '記事PV出力_' . date('Ymd_His') . '.csv';

		// CSVダウンロード用のヘッダーを設定
		header('Content-Type: text/csv; charset=utf-8');
		header('Content-Disposition: attachment; filename="' . $file_name . '"');

		// 出力ストリームに接続されたファイルポインタを作成
		$output = fopen('php://output', 'w');

		// Excel互換のためにUTF-8 BOM（バイトオーダーマーク）を追加
		fwrite($output, "\xEF\xBB\xBF");

		// CSVヘッダー行
		fputcsv($output, ['記事ID', '記事タイトル', '記事URL']);

		// 公開済みの記事を全て取得
		$args = [
			'post_type'      => 'post',
			'post_status'    => 'publish',
			'posts_per_page' => -1, // 全ての記事を取得
		];
		$posts = new WP_Query($args);

		// 記事が見つからなかった場合の処理
		if (!$posts->have_posts()) {
			fputcsv($output, ['記事が見つかりませんでした。']);
			fclose($output);
			exit;
		}

		// 記事の処理件数をカウント
		$post_count = 0;

		if ($posts->have_posts()) {
			while ($posts->have_posts()) {
				$posts->the_post();

				// 記事の処理件数をカウントアップ
				$post_count++;

				// 記事IDとタイトルを取得
				$post_id    = get_the_ID();
				$post_title = get_the_title();
				$post_url = get_permalink();

				// CSVにデータを追加
				fputcsv($output, [$post_id, $post_title, $post_url]);
			}
			wp_reset_postdata();
		}

		// 処理件数をCSVに出力
		fputcsv($output, ['処理件数：' . $post_count . '件']);

		// ファイルポインタを閉じる
		fclose($output);

		// これ以上の出力を防ぐために終了
		exit;
	}
}

/**
 * 管理画面の投稿一覧画面にCSV出力ボタンを追加する
 */
function addCsvExportButtonToPostList()
{
    global $pagenow;

    // 投稿一覧画面でのみ実行
    if ('edit.php' === $pagenow) {
?>
        <form method="post" action="<?php echo admin_url('admin-post.php'); ?>" style="display: inline-block; position: fixed; right: 30px; bottom: 30px;">
            <input type="hidden" name="action" value="csv_export">
            <?php wp_nonce_field('csv-output-action', 'nonce'); ?>
            <input type="hidden" name="csv-output" value="true">
            <button type="submit" class="csv-output-btn">記事情報をCSV出力</button>
        </form>
<?php
    }
}
add_action('admin_footer', 'addCsvExportButtonToPostList');

/**
 * CSV出力処理を実行
 */
add_action('admin_post_csv_export', 'createCsvPostList');
add_action('admin_post_nopriv_csv_export', 'createCsvPostList');

functions.phpの編集方法については以下の記事で詳しく解説しています。

あわせて読みたい

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。 しかし、functions.phpを編集したことで何らかのエラーが発生…

解説

簡単にソースコードの解説をします。

 ポイント（３つ）

① createCsvPostList()

CSVファイルの出力を行う関数

② addCsvExportButtonToPostList()

投稿一覧画面にCSV出力処理を実行するためのボタンを設置する関数
（＝createCsvPostList()を実行するためのボタン）

③ add_action(‘admin_post_〇〇〇’, ‘●●●●●’);

WordPress管理画面内でPOST送信を実行するために必要なアクションフック

① createCsvPostList()

createCsvPostList()はCSVファイルの出力を行う関数です。この関数が実行されることで、ローカルPC上に記事一覧情報がCSVファイルでダウンロードされます。

/**
 * CSVファイルを生成して出力する。
 */
function createCsvPostList()
{
	if (isset($_POST['csv-output']) && $_POST['csv-output'] === 'true') {
		// セキュリティチェック
		if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'csv-output-action')) {
			wp_die('セキュリティチェックに失敗しました。');
		}

		// CSVファイル名
		$file_name = '記事PV出力_' . date('Ymd_His') . '.csv';

		// CSVダウンロード用のヘッダーを設定
		header('Content-Type: text/csv; charset=utf-8');
		header('Content-Disposition: attachment; filename="' . $file_name . '"');

		// 出力ストリームに接続されたファイルポインタを作成
		$output = fopen('php://output', 'w');

		// Excel互換のためにUTF-8 BOM（バイトオーダーマーク）を追加
		fwrite($output, "\xEF\xBB\xBF");

		// CSVヘッダー行
		fputcsv($output, ['記事ID', '記事タイトル', '記事URL']);

		// 公開済みの記事を全て取得
		$args = [
			'post_type'      => 'post',
			'post_status'    => 'publish',
			'posts_per_page' => -1, // 全ての記事を取得
		];
		$posts = new WP_Query($args);

		// 記事が見つからなかった場合の処理
		if (!$posts->have_posts()) {
			fputcsv($output, ['記事が見つかりませんでした。']);
			fclose($output);
			exit;
		}

		// 記事の処理件数をカウント
		$post_count = 0;

		if ($posts->have_posts()) {
			while ($posts->have_posts()) {
				$posts->the_post();

				// 記事の処理件数をカウントアップ
				$post_count++;

				// 記事IDとタイトルを取得
				$post_id    = get_the_ID();
				$post_title = get_the_title();
				$post_url = get_permalink();

				// CSVにデータを追加
				fputcsv($output, [$post_id, $post_title, $post_url]);
			}
			wp_reset_postdata();
		}

		// 処理件数をCSVに出力
		fputcsv($output, ['処理件数：' . $post_count . '件']);

		// ファイルポインタを閉じる
		fclose($output);

		// これ以上の出力を防ぐために終了
		exit;
	}
}

上から順番に、主要なソースコードの解説をします。

if (isset($_POST['csv-output']) && $_POST['csv-output'] === 'true'){
    ～省略～
}

name属性がcsv-outputでvalue属性がtrueとなっているボタンからPOST送信があった場合にのみ、CSV出力処理が実行されるよう制御しています。

// セキュリティチェック
if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'csv-output-action')) {
	wp_die('セキュリティチェックに失敗しました。');
}

WordPressにはnonceという仕組みが用意されています。いわゆるCSRF攻撃対策のために、上記のセキュリティチェック処理が必須です。

CSRF対策については以下の記事で詳しく解説しています。

あわせて読みたい

【CSRF】攻撃の流れやPHPでの対策方法を解説【クロスサイトリクエストフォージェリ】 Webサイトへのセキュリティ攻撃の１つにCSRF（クロスサイトリクエストフォージェリ）というものがあります。 この記事では、 CSRFの攻撃の流れ 攻撃による影響・被害 PH…

具体的には、ボタンをクリックしたときにトークン（ランダムな文字列）も一緒にPOST送信し、上記のソースコードで「このPOST送信は受け取って問題のないものか？（攻撃者によるリクエストではないか？）」を判定しています。

POST送信を行うようなWebアプリでは、必ずこのようにトークンを用いて正規のリクエストかどうかを判定する必要があります。

ケケンタ

CSRF対策をしておかないと、例えば、「アクセス情報を改ざん → 不正にアクセスされる」といった被害が発生する可能性があります！

// CSVファイル名
$file_name = '記事PV出力_' . date('Ymd_His') . '.csv';

コメントにもあるように、ここでCSVファイルの名前を設定しています。ファイルの上書きを防ぐためにも、基本的には日時情報を含めることで、ファイル名が必ず一意となるようにすることをオススメします。

// CSVダウンロード用のヘッダーを設定
header('Content-Type: text/csv; charset=utf-8');
header('Content-Disposition: attachment; filename="' . $fileName . '"');

ここではヘッダー情報を設定しています。

// CSVヘッダー行
fputcsv($output, ['記事ID', '記事タイトル', '記事URL']);

CSVファイルに出力する各列の項目名を設定しています。出力する情報や出力する順番などに応じてご調整ください。

// 公開済みの記事を全て取得
$args = [
	'post_type'      => 'post',
	'post_status'    => 'publish',
	'posts_per_page' => -1, // 全ての記事を取得
];
$posts = new WP_Query($args);

ここではすべての記事情報を取得しています。行っていることは、サブループの生成とまったく同じです。

上記のソースコードでは「公開済み」の記事を対象としていますが、別のオプションや複数のオプションを同時に指定することも可能です。

サブループ（WP_Query）については以下の記事で詳しく解説しています。
※「投稿状態のオプション」については下記記事の投稿の状態（公開・下書きなど） の章をご覧ください。

あわせて読みたい

【WordPress】WP_Query（サブループ）の使い方とパラメータ一覧を紹介 WordPressでサイト制作をしているとメインの記事一覧以外に「別の記事一覧も出力したい！」となることが多々あります。 今回はそこで深く関係してくるメインループ、サ…

if ($posts->have_posts()) {
	while ($posts->have_posts()) {
		$posts->the_post();

		// 記事の処理件数をカウントアップ
		$post_count++;

		// 記事IDとタイトルを取得
		$post_id    = get_the_ID();
		$post_title = get_the_title();
		$post_url = get_permalink();

		// CSVにデータを追加
		fputcsv($output, [$post_id, $post_title, $post_url]);
	}
	wp_reset_postdata();
}

サブループを利用したことがある方ならお馴染みのループ処理です。ページ制作のときはここでHTMLタグを使用して記事情報を出力しますが、今回はCSVファイルへ出力するデータとして、記事情報をピックアップしています。

もしカテゴリーやタグ情報も必要な場合は、この処理内でget_the_category()などのテンプレートタグを使用してご自由にカスタマイズ可能です。

② addCsvExportButtonToPostList()

続いて、投稿一覧画面にCSV出力処理を実行するためのボタンを表示するソースコードの解説です。

/**
 * 管理画面の投稿一覧画面にCSV出力ボタンを追加する
 */
function addCsvExportButtonToPostList()
{
    global $pagenow;

    // 投稿一覧画面でのみ実行
    if ('edit.php' === $pagenow) {
?>
        <form method="post" action="<?php echo admin_url('admin-post.php'); ?>" style="display: inline-block; position: fixed; right: 30px; bottom: 30px;">
            <input type="hidden" name="action" value="csv_export">
            <?php wp_nonce_field('csv-output-action', 'nonce'); ?>
            <input type="hidden" name="csv-output" value="true">
            <button type="submit" class="csv-output-btn">記事情報をCSV出力</button>
        </form>
<?php
    }
}
add_action('admin_footer', 'addCsvExportButtonToPostList');

global $pagenow;

// 投稿一覧画面でのみ実行
if ('edit.php' === $pagenow) {
    ～省略～
}

global $pagenow;により、「現在表示中のページ情報」を取得することができます。また、「投稿一覧画面＝edit.php」のため、if分でいまいるページが投稿一覧画面かどうかを判定しています。

<!-- ボタンは画面右下に固定表示する -->
<form method="post" action="<?php echo admin_url('admin-post.php'); ?>" style="display: inline-block; position: fixed; bottom: 30px; right: 30px;">
	<input type="hidden" name="action" value="csv_export">
	<?php wp_nonce_field('csv-output-action', 'nonce'); ?>
	<input type="hidden" name="csv-output" value="true">
	<button type="submit" class="csv-output-btn">PV数をCSV出力</button>
</form>

ここで投稿一覧画面に表示するボタンのHTMLを記述しています。

WordPressでは管理画面内でフォーム送信を処理するためのファイルとしてadmin-post.phpが準備されています。action属性では、admin_url()関数を使用することで、admin-post.phpへPOST送信するためのURLを生成しています。

また、wp_nonce_field関数によって、自動的にトークンを持つinputタグが生成されます。

wp_nonce_field関数によって自動生成されるinputタグ

add_action('admin_footer', 'addCsvExportButtonToPostList');

最後に、アクションフックadmin_footerにaddCsvExportButtonToPostList()関数をフックすることで、投稿一覧画面のフッター部分（</body>タグの直前）でボタンのHTMLが出力されるよう設定しています。

admin_footerフックを使用した場合、HTMLの出力箇所をCSSで調整する必要があります。今回はわかりやすくする意味でposition: fixed;による固定配置としました。

③ add_action(‘admin_post_〇〇〇’, ‘●●●●●’);

３つ目のポイントとなるソースコードは、以下の２行です。

/**
 * CSV出力処理を実行
 */
add_action('admin_post_csv_export', 'createCsvPostList');
add_action('admin_post_nopriv_csv_export', 'createCsvPostList');

先ほどadmin-post.phpについて触れました。

上記２行のソースコードは、admin-post.phpで実行するための関数を登録するためのものです。admin-post.phpは、フォーム送信されたデータに含まれる「action属性の値」にもとづき、登録されているアクション（関数）を実行します。

具体的にはadmin_post_{action} というアクションフックに登録された関数が実行されるという仕組みになっています。

例えば今回のソースコードを見ると、formタグ内にあるinputタグのひとつにvalue="csv_export"が設定されています。（つまりフォームデータにcsv_exportが含まれる）

一方、アクションフックではadd_action('admin_post_csv_export', 'createCsvPostList'); のように、createCsvPostList()関数をフックしています。

これにより、投稿一覧画面のボタンを押すことでcreateCsvPostList()＝CSV出力処理が実行されるという仕組みになっています。

なお、admin_post_nopriv_csv_exportアクションフックについては、本来は非ログインユーザー向けのものです。一見すると不要にも思えますが、セキュリティの互換性から、admin_post_{action}とadmin_post_nopriv_{action}は併記することが推奨されています。

まとめ

以上が記事情報をCSV出力するボタンを投稿一覧画面に設置する方法でした。

今回は「記事一覧情報をCSV出力する」という具体的な目的にそった内容でした。しかし、当記事の内容を理解すれば、管理画面上でフォーム送信する処理を安全に書くことができるようになります。

特にnonceによるセキュリティチェックやadmin_post_{action}のようなアクションフックの理解は、Wordpressカスタマイズの柔軟性を高めてくれるはずです。

ケケンタ

この記事が皆さまのWordpress開発のお役に立てたなら何よりです！

それでは、最後までご覧いただきありがとうございました！

当ブログではWordpressやWeb制作、PHPやLaravelなどのWebアプリに関する情報を発信しています。ご興味のある方はほかの記事もご覧いただけるとうれしいです！

この記事ではWordPressで

カスタム投稿タイプのパーマリンクを「数字ベース」にする方法

をご紹介します。

デフォルト機能である「投稿」であれば、パーマリンク構造は管理画面「設定」→「パーマリンク」から簡単に設定可能です。

しかし、カスタム投稿タイプの場合、プラグインを用いるか、あるいはfunctions.phpにソースコードを記述する必要があります。

ケケンタ

今回はfunctions.phpにソースコードを記述して、カスタム投稿タイプのパーマリンク構造を「数字ベース」に設定する方法をご紹介します！

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

カスタム投稿タイプのパーマリンク構造を「数字ベース」にする

カスタム投稿タイプのパーマリンク構造を「数字ベース」にする手順は非常に簡単で、たったの２ステップで完了できます。

STEP1｜管理画面「設定」→「パーマリンク」の設定が反映されないようにする

カスタム投稿タイプをプラグイン「CPT UI」と「functions.php」のどちらで追加しているのかによって対応内容が変わります。

パターン①　CPT UIを使用している場合

「フロントでのリライト」を「False」に変更します。

パターン②　functions.phpで追加している場合

functions.phpのカスタム投稿タイプ定義箇所のオプションに下記を追記します。

'rewrite' => array('with_front' => false),

STEP2｜functions.phpへソースコードを追記

次に、以下のソースコードをfunctions.phpへ追記します。

/**
 * カスタム投稿タイプのスラッグを「数字ベース」にする
 */
function my_custom_post_type_link( $link, $post ){
    if ( '★your-post-type-slug' === $post->post_type ) {
        return home_url( 'archives/★your-post-type-slug/' . $post->ID );
	}
	return $link;
}
add_filter( 'post_type_link', 'my_custom_post_type_link', 1, 2 );

function my_custom_rewrite_rules_array( $rules ) {
    $new_rules = array( 
        'archives/★your-post-type-slug/([0-9]+)/?$' => 'index.php?post_type=★your-post-type-slug&p=$matches[1]',
	);
    
	return $new_rules + $rules;
}
add_filter( 'rewrite_rules_array', 'my_custom_rewrite_rules_array' );

「★your-post-type-slug」（計４か所）をご自身のカスタム投稿タイプスラッグへ置き換えてお使いください。

ケケンタ

たったこれだけで任意のカスタム投稿タイプのパーマリンク構造を「数字ベース」へ変更することが可能です！

補足｜archivesを除去したい場合

やることは、前述のソースコードから「archives」を取り除くだけです。

/**
 * カスタム投稿タイプのスラッグを「数字ベース」にする
 */
function my_custom_post_type_link( $link, $post ){
    if ( '★your-post-type-slug' === $post->post_type ) {
        return home_url( '/★your-post-type-slug/' . $post->ID );
	}
	return $link;
}
add_filter( 'post_type_link', 'my_custom_post_type_link', 1, 2 );

function my_custom_rewrite_rules_array( $rules ) {
    $new_rules = array( 
        '★your-post-type-slug/([0-9]+)/?$' => 'index.php?post_type=★your-post-type-slug&p=$matches[1]',
	);
    
	return $new_rules + $rules;
}
add_filter( 'rewrite_rules_array', 'my_custom_rewrite_rules_array' );

「★your-post-type-slug」（計４か所）をご自身のカスタム投稿タイプスラッグへ置き換えてお使いください。

まとめ

以上がWordPressでカスタム投稿タイプのパーマリンクを「数字ベース」にする方法でした。

使用頻度は比較的少ないかもしれませんが、実案件で使用する機会があったためこれを機に記事にまとめてみました。

ケケンタ

この記事が少しでもお役に立ったなら何よりです！

当ブログではWordPressやPHPなどに関する情報を発信しています。ご興味のある方はほかの記事もご覧いただけるとうれしいです！

それでは、最後までご覧いただきありがとうございました。

この記事ではWordPressで

記事一覧ページの表示件数を
プルダウンで選択可能にする方法（ソースコード）

をご紹介します。

今回ご紹介する方法は、オリジナルテーマ向けです。

WordPressで記事一覧を表示する場合、home.phpやアーカイブページでメインクエリを回したり、任意のテンプレートファイルでサブクエリを生成することになります。

そのとき、一度に表示する記事件数は、メインクエリならWordPress管理画面、サブクエリなら同じくWordPress管理画面かposts_per_pageオプションで設定します。

ケケンタ

今回ご紹介する方法を併用することで、サイトを訪れたユーザ自身が、任意の件数で記事を一覧表示できるようになります！

記事件数が多いサイトなどで特に有効かと思います。

ぜひご活用いただければ幸いです！

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【ソースコード】記事一覧ページの表示件数をプルダウンで選択可能にする

以下がページ内の記事表示件数をプルダウンメニューで選択できるようにするためのソースコードです。

functions.php

/*******************************
 * プルダウンから表示件数を変更
 * ***************************** */

// クエリパラメータを追加
function add_query_vars_filter($vars) {
  $vars[] = "posts_per_page";
  return $vars;
}
add_filter('query_vars', 'add_query_vars_filter');

// 投稿クエリを修正
function modify_posts_per_page($query) {
  // 「メインクエリ」または「home.php」または「アーカイブページ」を対象とする
  // ※「is_post_type_archive」などの条件分岐タグで条件を追加すればカスタム投稿タイプのアーカイブページも設定可能
  if (!is_admin() && $query->is_main_query() && (is_home() || is_archive()) {
      $posts_per_page = get_query_var('posts_per_page', 10); // デフォルトは10ページ表示
      $query->set('posts_per_page', $posts_per_page);
  }
}
add_action('pre_get_posts', 'modify_posts_per_page');

// ページネーションリンクに表示件数情報を追加する
function add_posts_per_page_to_pagination($links) {
  if (is_archive() || is_home()) {
      global $wp_query;
      $posts_per_page = get_query_var('posts_per_page');

      foreach ($links as $key => $link) {
          $links[$key] = add_query_arg('posts_per_page', $posts_per_page, $link);
      }
  }
  return $links;
}
add_filter('paginate_links', 'add_posts_per_page_to_pagination');

表示件数を変更できるようにしたいテンプレートファイルに設置

<!-- 表示記事数選択フォーム（プルダウン） -->
<form method="get" id="posts-per-page-form">
    <label for="posts_per_page">表示件数：</label>
    <select name="posts_per_page" id="posts_per_page" onchange="this.form.submit();">
        <option value="5" <?php selected(get_query_var('posts_per_page'), 5); ?>>5</option>
        <option value="10" <?php selected(get_query_var('posts_per_page'), 10); ?>>10</option>
        <option value="15" <?php selected(get_query_var('posts_per_page'), 15); ?>>15</option>
        <option value="20" <?php selected(get_query_var('posts_per_page'), 20); ?>>20</option>
    </select>
    <!-- プルダウンが変更されたら１ページ目に戻る -->
    <input type="hidden" name="paged" value="1">
</form>

CSS（例）

/* 例: プルダウンメニューのスタイル */
#posts-per-page-form {
    margin-bottom: 20px;
}
#posts_per_page {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

ケケンタ

以下より、各ソースコードの役割について解説していきます！

解説①　クエリパラメータを追加

// クエリパラメータを追加
function add_query_vars_filter($vars) {
  $vars[] = "posts_per_page";
  return $vars;
}
add_filter('query_vars', 'add_query_vars_filter');

このソースコードでクエリパラメータを追加しています。

ケケンタ

以下はPHPの記事ですが、クエリパラメータについても詳しく解説しています。ご興味のある方はぜひご覧ください。

あわせて読みたい

【PHP】HTTPリクエストとは？GETとPOSTの意味 PHPを勉強しているとHTTPリクエストとかGETとかPOSTって出てくるけど、なんだかよく分からない……。 今回はこのようなお悩みをお持ちの方に向けてHTTPリクエストについて…

解説②　投稿クエリを修正

// 投稿クエリを修正
function modify_posts_per_page($query) {
  // 「メインクエリ」または「home.php」または「アーカイブページ」を対象とする
  // ※「is_post_type_archive」などの条件分岐タグで条件を追加すればカスタム投稿タイプのアーカイブページも設定可能
  if (!is_admin() && $query->is_main_query() && (is_home() || is_archive()) {
      $posts_per_page = get_query_var('posts_per_page', 10); // デフォルトは10ページ表示
      $query->set('posts_per_page', $posts_per_page);
  }
}
add_action('pre_get_posts', 'modify_posts_per_page');

このソースコードでは、ループ処理における「記事の表示件数」を上書きしてます。

具体的には、ハイライト行のget_query_var()で、URLに含まれるクエリパラメータからposts_per_page＝表示件数を取得しています。

例えば、「https://kekenta-it-blog.com/archive?posts_per_page=5」というURLでそのページへアクセスがあった場合、posts_per_pageには「5」が格納され、１ページに５件の記事が表示されます。

ケケンタ

get_query_varの第２引数は、posts_per_pageというクエリパラメータがURLに含まれていなかった場合に設定されるデフォルト値です。

また、コメントでも記述していますが、条件分岐タグを追加することで、記事一覧の表示件数を制御する投稿タイプなどを増やすことも可能です。

（例１）カスタム投稿タイプ「sample-post-type」を追加

// 投稿クエリを修正
function modify_posts_per_page($query) {
  if (!is_admin() && $query->is_main_query() && (is_home() || is_archive() || is_post_type_archive('sample-post-type')) {
      $posts_per_page = get_query_var('posts_per_page', 10); 
      $query->set('posts_per_page', $posts_per_page);
  }
}
add_action('pre_get_posts', 'modify_posts_per_page');

（例２）home.phpを除外し、カスタム投稿タイプ「sample-post-type01」、「sample-post-type02」を追加

// 投稿クエリを修正
function modify_posts_per_page($query) {
  if (!is_admin() && $query->is_main_query() && (is_archive() || is_post_type_archive(array('sample-post-type01', 'sample-post-type02'))) {
      $posts_per_page = get_query_var('posts_per_page', 10); 
      $query->set('posts_per_page', $posts_per_page);
  }
}
add_action('pre_get_posts', 'modify_posts_per_page');

ケケンタ

このように条件分岐タグで自由に条件部分を変更できるので、ご自身の環境に合うようにご調整いただければと思います。

解説③　ページネーションリンクに表示件数情報を追加する

// ページネーションリンクに表示件数情報を追加する
function add_posts_per_page_to_pagination($links) {
  if (is_archive() || is_home()) {
      global $wp_query;
      $posts_per_page = get_query_var('posts_per_page');

      foreach ($links as $key => $link) {
          $links[$key] = add_query_arg('posts_per_page', $posts_per_page, $link);
      }
  }
  return $links;
}
add_filter('paginate_links', 'add_posts_per_page_to_pagination');

１ページ内の表示件数を指定するということは、必然的にページネーションの設置が必須ということになります。

そのため、上記のソースコードでは、設置済みのページネーションリンクにプルダウンで選択された記事の表示件数情報が追加設定されるようにしています。

カスタム投稿タイプで利用する場合は、こちらのソースコードのif文にも解説②　投稿クエリを修正でご紹介したように条件分岐タグで条件を追加してあげる必要があります。

※条件を正しく追加しないと、目的のカスタム投稿タイプでだけ何故かページネーションが正常に機能しないという不具合につながってしまうのでご注意ください。

解説④　表示記事数選択フォーム（プルダウン）

<!-- 表示記事数選択フォーム（プルダウン） -->
<form method="get" id="posts-per-page-form">
    <label for="posts_per_page">表示件数：</label>
    <select name="posts_per_page" id="posts_per_page" onchange="this.form.submit();">
        <option value="5" <?php selected(get_query_var('posts_per_page'), 5); ?>>5</option>
        <option value="10" <?php selected(get_query_var('posts_per_page'), 10); ?>>10</option>
        <option value="15" <?php selected(get_query_var('posts_per_page'), 15); ?>>15</option>
        <option value="20" <?php selected(get_query_var('posts_per_page'), 20); ?>>20</option>
    </select>
    <!-- プルダウンが変更されたら１ページ目に戻る -->
    <input type="hidden" name="paged" value="1">
</form>

最後に、こちらのソースコードがプルダウンメニューです。

表示記事件数を変更したいページのテンプレートファイル内に設置します。

表示件数を変更したい場合はoptionタグ内にある２か所の数字を任意のものに変更してください。

どちらか片方の変更が漏れると正常に動作しない部分が発生しますのでご注意ください。

ケケンタ

CSSはもちろん自由に調節してしまってOKです！

【注意点】検索結果ページにおける挙動について

今回ご紹介したページ内の記事表示件数をプルダウンメニューで選択できるようにするソースコードですが、

検索結果ページでは正常に動作しません。

具体的には、検索結果を維持した状態で表示記事件数を変更することができません。

ケケンタ

検索結果ページ（基本的にはsearch.phpファイルになるかと思います）にプルダウンメニューを設置してしまうと、予期せぬ不具合につながる可能性があるためご注意ください。

未検証のため、この記事ではご紹介できませんが、もし検索結果ページでも同様の機能を実装したい場合は、URLに含まれる検索キーワードのクエリパラメータを保持するための処理を追加で記述する必要があります。

まとめ

以上が、記事一覧ページの表示件数をプルダウンで選択可能にするソースコードのご紹介でした。

ユーザ自身が記事一覧ページで記事の表示件数を変更できるとユーザビリティの向上につながります。

今回の記事がその一助となれば幸いです！

ケケンタ

最後までご覧いただきありがとうございました！

当ブログではWordPressやWeb制作、PHPなどに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです。

WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。

しかし、functions.phpを編集したことで何らかのエラーが発生してしまうと、「サイトが真っ白になる」という最悪の事態を招きます。

そのためfunctions.phpを編集するときは、カスタマイズする方のスキルに応じて適切な方法を選択することが重要です。

この記事では

functions.phpを編集する「３つ」の方法
＋
function.phpを編集するときの注意点

を丁寧にお伝えします。

ケケンタ

WordPress初心者の方でも安心安全にfunctions.phpを編集する方法もご紹介しますので、ぜひご参考にしてください！

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

functions.phpとは？

本章では、WordPressにおけるfunctions.phpの位置づけや役割を解説します。

functions.phpはWordPressの「心臓部」

functions.phpはWordPressにおいて心臓部にあたるファイルです。

functions.phpにソースコードを記述することで、WordPress全体の機能カスタマイズや権限管理などを行うことが可能です。

また、functions.phpに何らかのエラー・バグが紛れ込むと「サイトが真っ白」になってしまうことがあり、編集するときは慎重に扱うことが大切です。

functions.phpの役割

そんな非常に重要なファイルであるfunctions.phpの役割には、主に以下のようなものが挙げられます。

ケケンタ

一言で言うと「WordPressサイト全体のカスタマイズを担っている」ということですね！

そのため、WordPress機能のカスタマイズをしようと思ったとき、真っ先に挙がる方法が「functions.phpファイルの編集」ということになります。

functions.phpを編集するときの「注意点」

繰り返しになりますが、functions.phpはWordPressにおける心臓部にあたる非常に重要なファイルです。

そのため、「扱いは慎重に」という点を念頭に置くことが大切です。

ケケンタ

本章では具体的にどういった点に注意してfunctions.phpを扱うべきかを解説します！

注意点①　functions.phpを編集するときは必ずバックアップを取る

functions.phpを編集するときに必ず実施していただきたいのが、「バックアップを取る」ということです。

つまり「編集してサイト上に問題が発生したとき、簡単に以前の状態へ戻せるようにする」というのがバックアップを取る目的ということです。

ケケンタ

ちなみに「バックアップ」なんてカッコイイ言い方をしていますが、単純に元々のファイルを複製（コピー）しておいたり、メモ帳にソースコードを丸っとコピペしておくだけでOKです！

注意点②　全角スペースが入らないようにする

functions.phpは「全角スペース」がひとつ入り込むだけでエラーになります。

そして「全角スペース」はパソコン標準搭載のメモ帳だと可視化されないため、人の目だけでその混入に気がつくのは困難です。

functions.phpを編集するとき、もしも「日本語の入力」をするタイミングがあったら、その後はすぐに半角入力モードへ戻すのを忘れないようにしましょう。

注意点③　ブログなどから「コピペしたコード」が100%正しいとは限らない

WordPressの機能をカスタマイズをするとき、Web検索してブログなどからソースコードをコピペする機会は多いかと思います。

しかし、そのとき必ず意識していただきたいのが

コピペしたソースコードが100％正しいとは限らない

という点です。

具体的には、以下のような誤りが含まれている可能性を考慮する必要があります。

基本的にどのサイトであっても、テストを行ったうえでソースコードを掲載しているはずです。

（もちろん当ブログでも、必ず検証を実施したソースコードを掲載するようにしています）

しかし、サイト運営者が人である以上は、記事を執筆しているときの誤操作で気が付かない内に「文字の誤植」、「全角スペースの混入」などが発生していまう可能性はゼロではありません。

特に「全角スペース」の混入は前節「注意点②　全角スペースが入らないようにする」でもお伝えしたように、視覚的に気が付くことが困難です。

ケケンタ

サイトからコピペしたソースコードを使用すること自体は全然ありです。
しかし、「あくまで人の手で作成された記事・ソースコード」であることは理解した上で使用するようにしましょう。

functions.phpを編集する方法

本章ではfunctions.phpを編集する方法を「３つ」お伝えします。

前述したようにfunctions.phpは、エラーが発生したとき「サイトが真っ白」になることもある、WordPressの心臓部にあたる重要なファイルです。

そのため、編集方法はご自身のスキルに適したものを選択することが非常に重要です。

ケケンタ

この記事で解説するfunctions.phpの編集方法は以下の３つです！

以下より、ひとつずつ順番に解説します。

方法①　FTPソフトを使用する

知識やスキルに自信のある方ならば、FTPソフトを使用してfunctions.phpを編集する方法がもっともおすすめです。

FTPソフトを使用することで、エックスサーバーなどのレンタルサーバー上にあるファイルを、使用中のパソコン上へダウンロードすることが可能です。

それにより、ファイルの編集を使用中のパソコン上で行なうことが可能になります。

また、何かエラーが発生してサイトに問題が起きてしまったときも、編集直前のファイルのバックアップをとりあえずアップロードし直すだけで、すぐにエラーを解消できます。

バックアップを取っておかないと、エラー発生後に元の状態へ復旧できなくなる恐れがあるためご注意ください！
※バックアップの必要性については「注意点①　functions.phpを編集するときは必ずバックアップを取る」でお伝えしています。

ケケンタ

functions.phpでエラーが発生して「サイトが真っ白」になってしまうと誰でも焦りを感じてしまいます。
しかし、そのようなときでも、FTPソフトを使用していれば、バックアップファイルを思考停止でアップロードし直すだけでサイトを元通りにできるというのが大きなポイントです！

FTPソフトを使用した具体的なファイル編集方法の記事は鋭意制作中です。
現時点でご興味のある方は、Googleで「WordPress　エックスサーバー　FTPソフト」などのキーワードで検索いただくと、たくさんの参考記事がヒットするかと思いますので、そちらをご参照下さい。

方法②　プラグインを使用する

functions.phpを編集する方法の中でもっとも安全かつ手軽なのが、この「プラグインを使用する」方法です。

具体的には、Code Snippets（コードスニペッツ）というプラグインを使用します。

ずらずらとメリットを並べてしまいましたが、もっとも重要なのは

エラーに自動対応してくれる

という点です。

すべてではありませんが、記述したソースコードにエラーが含まれていた場合、自動的にそのソースコードを無効化してくれます。

そのため「サイトが真っ白」になることもそうそうありませんし、万が一そうなってしまっても簡単に復旧する方法があります。

仕事でWeb制作などをされている方はFTPソフトの使用は必須ですが、個人ブログであればCode Snippetsを使用する方法を選択してもまったく問題ありません。

ケケンタ

具体的な使用方法やエラー発生時の対応方法については以下の記事で詳しく解説しています。
ご興味のある方はぜひご一読ください！

あわせて読みたい

子テーマ無しでfunctions.phpを編集｜Code Snippetsの使い方【WordPress】 functions.phpを編集したいけど、失敗したら「画面が真っ白になる」って聞くし、不安だな…… 今回はこのようにWordPressでfunctions.phpを編集することにハードルを感じ…

方法③　テーマファイルエディターを使用する

※この方法はエラー発生時の対応ができないなら非推奨（というより、絶対に避けるべき方法）です。

最後にご紹介するのはテーマファイルエディターを使用する方法です。

ケケンタ

一見すると便利に見えるテーマファイルエディタですが、デメリットもあるため扱いには注意が必要です！

注意点

テーマファイルエディタのデメリットの内、致命的なのが「バックアップ機能が無い」ことです。

テーマファイルエディタで編集した内容によってサイトにエラーが発生し、「サイトが真っ白」になってしまったとしても、元の状態に戻すにはFTPソフトなどを利用して、functions.phpを手動編集する必要があります。

そのため、一定以上の知識やスキルが無ければ、自力でサイトを復旧することが困難となる可能性もあります。

本章の冒頭でもお伝えしたように、エラー発生時に対応できる自信が無いのであれば、テーマファイルエディタでfunctions.phpを編集することは絶対に避けることを推奨します。

※その場合は方法②　プラグインを使用するを採用しましょう。

使用方法

テーマファイルエディタの使用方法は非常に簡単です。

繰り返しになりますが、テーマファイルエディタで追記・編集したソースコードによってエラーが発生すると、「サイトが真っ白」になる可能性があります。

もしもエラーに対応できる自信がない場合は、テーマファイルエディタの使用自体を避けることを強くおすすめします。

ケケンタ

方法②　プラグインを使用するがもっとも安全かつ確実な方法です。
こちらは大きなデメリットも無いため、もし少しでも不安があるならこちらの編集方法を採用しましょう！

まとめ　functions.phpの扱いは慎重に

いかがだったでしょうか。

この記事ではWordPressでfunctions.phpを編集する方法や注意点について解説しました。

functions.phpはWordPressの心臓部にあたる重要なファイルです。

そのため、何らかのバグが紛れ込むと、サイト全体に致命的な不具合が発生する可能性があります。

その一方で、functions.phpの編集方法自体は複数あります。

重要なのは、その中からご自身の知識・スキルレベルに適した方法を選択するということです。

ケケンタ

この記事を参考に、安心安全に編集できると思った方法をご選択いただけたなら何よりです！

それでは、最後までご覧いただきありがとうございました！

当ブログではWordPressやWeb制作、PHPに関する情報を発信しています。

ご興味のある方はぜひ他の記事もご覧いただけるとうれしいです。

ケケンタ

functions.phpを編集したいけど、失敗したら「画面が真っ白になる」って聞くし、不安だな……

今回はこのようにWordPressでfunctions.phpを編集することにハードルを感じている方へ向けて

プラグイン「Code Snippets」の使い方
+
functions.phpを安全に編集する方法

を画像付きでわかりやすく解説していきます。

当ブログでもWordPressのカスタマイズ記事はたくさん公開していますが、たいていの場合はfunctions.phpの編集が必要です。

しかし、普段からWordPressでWeb制作をされている方ならともかく、そうでない方にとっては超重要ファイルであるfunctions.phpを編集するのはハードルが高いかと思います。

ケケンタ

安心安全にfunctions.phpが編集できるよう、丁寧に解説していきます！
ぜひ最後までご覧ください！

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

Code Snippetsとは？

プラグイン「Code Snippets」は、functions.phpなどのファイルを直接いじらなくても、WordPressの管理画面で誰でも簡単にコードの追加・編集ができるようにするためのプラグインです。

冒頭でもお伝えしたように、WordPressで機能的なカスタマイズをするときは、必ずと言って良いほどfunctions.phpなどのファイルを編集しなくてはいけません。

しかし、functions.phpはWordPressにおける心臓部のような存在で、ちょっとでも記述ミスがあると「サイトが真っ白」になってしまいます。

ケケンタ

「全角スペース」が紛れ込むだけでもエラーになって真っ白な画面になります……

「Code Snippets」は、そうした危うい状況を回避して、コードを安全に追加できるようにしてくれる便利なプラグインです。

Code Snippetsを使用するメリット

「Code Snippets」がどういったプラグインなのかを理解したところで、使用するメリットを具体的に見てみましょう。

このようにメリットはたくさんあります。
その中でも、なんといってもfunctions.phpを直接編集しなくて済み、エラーがあったときには自動的にコードを無効化して「真っ白い画面」になってしまうのを防いでくれる点が大きなメリットです。

Code Snippetsの使い方

STEP1　プラグインのインストール・有効化

まずはプラグインをインストールして有効化します。

STEP

Code Snippetsのインストール

「プラグイン」→「新規プラグインを追加」→「『プラグインの検索』に『Code Snippets』と入力」→「インストール」をクリック

 

STEP

Code Snippetsの有効化

インストールが完了したら「有効化」をクリックします。

 

STEP

不要な初期スニペット（コード）の削除

Code Snippetsでは、デフォルトでサンプルとして作成されているコードがいくつかあります。
もし不要であれば、このタイミングで削除してしまった方が、コード管理がしやすくなります。

STEP2　コードを作成・有効化する

プラグインを有効化できたら、次はソースコードを追加して「有効化」しましょう。

STEP

「新規追加」をクリックする

コードを新規作成するときは、「スニペット」→「新規追加」をクリックします。

 

STEP

「タイトル」と「ソースコード」を入力する

新規追加画面が表示されたら ①タイトル と ②ソースコード を入力します。

「ファンクション」タブが選択されていることをご確認ください。

 

ケケンタ

今回は例として、以下の内容を入力しています。

①タイトル

サンプル（投稿一覧に文字数を表示）

②ソースコード

/*
 * 投稿一覧画面に「本文」列を追加
 */
function my_add_post_column($columns) {
	$columns['length'] = __('本文');
	return $columns;
}
add_filter('manage_post_posts_columns', 'my_add_post_column');

/*
 * 「本文」列に記事の本文文字数を表示
 */
function my_custom_post_column($column_name, $post_id) {
	$post = get_post($post_id);
	if ($post === null) {
		echo "無効な投稿ID";
		return;
	}

	if ($column_name == 'length') {
		$content_length = mb_strlen(strip_tags($post->post_content));
		echo "本文: " . $content_length . " 文字";
	}
}	
add_action('manage_posts_custom_column', 'my_custom_post_column', 10, 2);

このソースコードを追加すると、「投稿一覧画面」に「本文の文字数」が表示されるようになります。

なお、ソースコードの実行範囲は以下の部分で選択可能です。

例えば今回の「投稿一覧画面に『本文の文字数』が表示されるようにする」というソースコードであれば、「管理画面のみで実行」を選択すると、より無駄がなくなります。

 

STEP

ソースコードを「有効化」する

追加したソースコードを「有効化」するときは画面下部にある「変更を保存して有効化」をクリックします。

有効化が成功すると以下のようなメッセージが表示されます。

 補足　～スニペットを有効・無効化する方法～

ソースコードを新規追加したときは「変更を保存して有効化」をクリックすることで、スニペットが「有効化」されます。

これ以外に、「スニペット管理画面」でも簡単にON/OFFを切り替えることが可能です。

STEP3　コードの内容がサイトへ反映されていることを確認する

最後に、有効化したソースコードの内容がサイトへ反映されていることを確認してみましょう。

今回追加したソースコードの例では、管理画面左側の「投稿」をクリックして「投稿一覧画面」を表示します。

ケケンタ

投稿一覧画面の列に、「本文」という列が追加+本文の文字数が表示されていれば成功です！

Code Snippetsを使用する際の注意点

注意点①　自動停止したときの対処方法

メリットでもご紹介したように、Code Snippetsではエラーがあったときにコードを自動停止してくれる機能が備わっています。

コードが自動停止されてしまった場合には、以下の流れでスニペットを再始動させましょう。

• エラーを修正する
• スニペットを再度「有効化」する

注意点②　強制実行されてエラーが発生したときの対処方法

ソースコードの内容によっては、エラーがあるにも関わらず、強制実行されてしまうことがあります。

強制実行によって「サイトが真っ白」になってしまったときには、以下の手順にしたがって、セーフモードを利用することでエラーを解消することが可能です。

STEP

セーフモードでCode Snippets編集画面へアクセスする

下記のURLへアクセスすると、Code Snippets編集画面をセーフモードで開くことが可能です。

Code Snippets 編集画面（セーフモード）：
https://ドメイン名/wp-admin/admin.php?page=snippets&snippets-safe-mode=1

 

STEP

疑わしいスニペットをOFFにする

セーフモードでCode Snippets編集画面へアクセスすると、スニペットが有効化されています（ただし、内部的には停止しています）

ケケンタ

有効化されているスニペットの内、エラーが発生したと思しきものを無効化しましょう。

 Code Snippets編集画面【URL比較】

• Code Snippets 編集画面（通常モード）：
  https://ドメイン名/wp-admin/admin.php?page=snippets
• Code Snippets 編集画面（セーフモード）：
  https://ドメイン名/wp-admin/admin.php?page=snippets&snippets-safe-mode=1

 

STEP

ソースコードを修正+有効化する

セーフモードでスニペットを無効化した状態でソースコードを修正→有効化します。

 

STEP

セーフモードを解除する（通常モードに戻す）

ソースコードの修正が問題なく完了できたら、再度通常モードで管理画面にアクセスしてみましょう。

Code Snippets 編集画面（通常モード）：
https://ドメイン名/wp-admin/admin.php?page=snippets

ケケンタ

このときに「真っ白い画面」が解消されていればOKです！

まとめ

ここまでプラグイン「Code Snippets」の使い方や注意点についてご紹介してきました。

WordPressをカスタマイズしようとした場合、プラグイン導入やテーマ独自の機能を利用するなど、いくつか選択肢があります。

しかし、それらの範囲を超えたカスタマイズをしたいとなった場合には、必ずと言っていいほどfunctions.phpの編集が必要になります。

WordPressファイルの扱いに慣れている方ならともかく、そうではない方にとって、「ミスをしたらサイトが真っ白になってしまう……」という不安な状態で、functions.phpを編集するのは非常にハードルが高いでしょう。

「Code Snippets」は、そんな悩みを解決してくれる便利なプラグインです。

使い方もとてもシンプルで、導入するのも簡単です。

ケケンタ

この記事を参考に、ぜひ「Code Snippets」を導入してWordPressのカスタマイズに挑戦してみてください！

当記事ではWordPressのカスタマイズ記事をたくさん公開しているので、そちらも参考にしていただけるとうれしいです。

それでは、最後までご覧いただきありがとうございました！

 WordPressカスタマイズのおすすめ記事

ケケンタ

特定の固定ページや投稿ページごとに簡単にCSSとかJavaScriptを設定できるようにしたいな……

今回はこのようなお悩みをお持ちの方に向けて

固定ページ編集画面や投稿ページ編集画面に
CSSやJavaScript用の入力フォームを設置（自作）する方法

をご紹介します。

 入力フォームの見た目

実は、プラグイン『WP Add Custom CSS』を使用すれば、CSSとJS専用の入力フォームは簡単に設置できます。

しかし、このプラグインを使用する上での懸念点として、最終更新が「2022年」で止まっていることが挙げられます。

プラグインの更新が止まっているということは、その分だけ最新のセキュリティリスクに対応できていない可能性が高いため、人によってはこのプラグインの使用は避けたいと考えるかと思います。

今回はそのような方へ向けて、CSSやJavaScript用の入力フォームを自作するためのソースコードをご紹介します。

ケケンタ

この入力フォームに記述されたCSSやJavaScriptは、そのページにしか反映されません！
つまりページごとのCSS・JavaScriptの個別設定がめちゃくちゃ簡単にできるということです！

ソースコードをfunctions.phpに貼りつけるだけで誰でも簡単に設置できるので、ぜひお試しください。

functions.phpの編集方法がご不明な場合は、以下の記事をご覧ください

あわせて読みたい

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。 しかし、functions.phpを編集したことで何らかのエラーが発生…

【ソースコード】固定・投稿ページ編集画面にCSSやJSの入力用フォームを設置

以下のソースコードをfunction.phpに追記するだけで簡単に固定・投稿編集ページにCSSやJavaScriptの入力フォームが設置できます。

functions.phpを編集する際は必ずバックアップをお取りください。

// 投稿画面にカスタム CSS を追加
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post',  'save_custom_css');
add_action('wp_head',    'insert_custom_css');

function custom_css_hooks() {
	// 投稿ページ編集画面用
	add_meta_box('custom_css', 'カスタム CSS', 'custom_css_input', 'post', 'normal', 'high');
	// 固定ページ編集画面用
	add_meta_box('custom_css', 'カスタム CSS', 'custom_css_input', 'page', 'normal', 'high');
}

function custom_css_input() {
    global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="' . wp_create_nonce('custom-css') . '" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">' . get_post_meta($post->ID, '_custom_css', true) . '</textarea>';
}

function save_custom_css($post_id) {
	if ( ! isset( $_POST['custom_css_noncename'] ) ) return $post_id;
    if ( ! wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
}

function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : 
            while (have_posts()) : the_post();
                echo '<style type="text/css">' . get_post_meta(get_the_ID(), '_custom_css', true) . '</style>';
            endwhile; 
        endif;
        rewind_posts();
    }
}

// 投稿画面にカスタム js を追加
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post',  'save_custom_js');
add_action('wp_footer',  'insert_custom_js');

function custom_js_hooks() {
	// 投稿ページ編集画面用
	add_meta_box('custom_js', 'カスタム JavaScript', 'custom_js_input', 'post', 'normal', 'high');
	// 固定ページ編集画面用
	add_meta_box('custom_js', 'カスタム JavaScript', 'custom_js_input', 'page', 'normal', 'high');
}

function custom_js_input() {
    global $post;
    echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="' . wp_create_nonce('custom-js') . '" />';
    echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">' . get_post_meta($post->ID, '_custom_js', true) . '</textarea>';
}

function save_custom_js($post_id) {
	if ( ! isset( $_POST['custom_js_noncename'] ) ) return $post_id;
	if ( ! wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_js = $_POST['custom_js'];
    update_post_meta($post_id, '_custom_js', $custom_js);
}

function insert_custom_js() {
    if (is_page() || is_single()) {
        if (have_posts()) : 
            while (have_posts()) : the_post();
                echo '<script>' . get_post_meta(get_the_ID(), '_custom_js', true) . '</script>';
            endwhile; 
        endif;
        rewind_posts();
    }
}

もちろん片方だけ設置しても問題ありません。

【解説】CSSの入力フォーム（例）

簡単にはなりますが、以下よりCSSの入力フォームを例に挙げてソースコードの解説をします。

ケケンタ

ご自身で調整したいときのご参考にしていただければと思います！

① 「投稿ページ編集画面用」と「固定ページ編集画面」にそれぞれ入力フォームの設置を指定

function custom_css_hooks() {
	// 投稿ページ編集画面用
	add_meta_box('custom_css', 'カスタム CSS', 'custom_css_input', 'post', 'normal', 'high');
	// 固定ページ編集画面用
	add_meta_box('custom_css', 'カスタム CSS', 'custom_css_input', 'page', 'normal', 'high');
}

② 出力する入力フォームをHTMLで記述

function custom_css_input() {
    global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="' . wp_create_nonce('custom-css') . '" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">' . get_post_meta($post->ID, '_custom_css', true) . '</textarea>';
}

ハイライト行はCSRF攻撃対策用のトークンを生成している箇所になるので削除厳禁です！

※CSRF攻撃については以下の記事で詳しく解説しています。

あわせて読みたい

【CSRF】攻撃の流れやPHPでの対策方法を解説【クロスサイトリクエストフォージェリ】 Webサイトへのセキュリティ攻撃の１つにCSRF（クロスサイトリクエストフォージェリ）というものがあります。 この記事では、 CSRFの攻撃の流れ 攻撃による影響・被害 PH…

③ 入力フォームの入力内容を保存する処理

function save_custom_css($post_id) {
	if ( ! isset( $_POST['custom_css_noncename'] ) ) return $post_id;
    if ( ! wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
}

ハイライト行で②の処理で生成したトークンのチェックを行っているため削除厳禁です。
上記のソースコードは基本的にいじる必要はないかと思います。

④ 入力フォームのCSSを実際のページ上に反映

function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : 
            while (have_posts()) : the_post();
                echo '<style type="text/css">' . get_post_meta(get_the_ID(), '_custom_css', true) . '</style>';
            endwhile; 
        endif;
        rewind_posts();
    }
}

上記のソースコードで入力フォームに入力されているCSSをページへ読み込んでいます。
※ここの処理も基本的に変更する必要はありません。

【補足】CSS用とJavaScript用ソースコードの違い

CSS用とJavaScript用ソースコードで、ひとつだけ違う点があるため念のため補足します。

ケケンタ

以下のソースコードで該当する行（４行目）をハイライトしました。

// 投稿画面にカスタム CSS を追加
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post',  'save_custom_css');
add_action('wp_head',    'insert_custom_css');

～　以下、省略　～

// 投稿画面にカスタム js を追加
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post',  'save_custom_js');
add_action('wp_footer',  'insert_custom_js');

～　以下、省略　～

ご覧いただくと、CSSでは「wp_head」、JavaScriptでは「wp_footer」という記述になっています。

これは分かりやすく言うと、以下のような違いになっています。

ケケンタ

Web制作の知識をお持ちの方ならお分かりいただけるかと思いますが、JavaScriptは、HTML要素が読み込まれたあとに処理が実行されないと、思うような動きにならない場合があります。

それを防ぐために、今回ご紹介するソースコードでも、JavaScriptの読み込みはあくまで「bodyの閉じタグ直前」になるよう記述しています。

まとめ

いかがだったでしょうか。

今回は、固定ページ編集画面・投稿ページ編集画面にCSSやJavaScript用の入力フォームを設置するためのソースコードをご紹介しました。

ケケンタ

ご紹介したソースコードをfunctions.phpに追記するだけで誰でも簡単に入力フォームを設置できるので、ぜひお試しください！

ちなみにですが、この記事でも使用している「SWELL」というテーマでは、functions.phpをいじらなくても、デフォルトでCSS・JavaScript用の入力フォームが設置されています。

しかも以下の画像ようにチェックボックスで細かな設定もできるようになっているので大変便利です。

ケケンタ

ご興味のある方は以下のボタンよりテーマ公式サイトをご覧ください。

SWELLの公式サイトを見てみる >

それでは、最後までご覧いただきありがとうございました！

ケケンタ

現在のページのカテゴリーに紐づいたタグ一覧を表示したいけど方法がわからない……！

今回はこのようなお悩みをお持ちの方に向けて

WordPressで特定ページのカテゴリーに紐づく
すべてのタグ一覧を出力する方法

をご紹介します。

ケケンタ

WordPressでは以下のような条件なら簡単に出力が可能です。

• 投稿に紐づくカテゴリー
• カテゴリーに紐づく投稿
• 投稿に紐づくタグ
• タグに紐づく投稿

しかし、

「カテゴリーに紐づくタグ」や「タグに紐づくカテゴリー」を出力する場合、ひと手間必要になります。

ケケンタ

今回はこの内、特定のページのカテゴリーに紐づいているタグの一覧を出力する方法をご紹介します。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【ソースコード】そのページのカテゴリーに紐づいているタグの一覧を出力する

早速ですが、以下がそのソースコードです。

タグ一覧を表示したい箇所に追加する

<?php 
	/** 
	 * ■ 処理の大枠
	 * １．そのページのカテゴリー情報を取得
	 * ２．カテゴリーに紐づいている投稿を全取得
	 * ３．２で取得した投稿に紐づいているタグを全取得
	 */

	$html = '';  // HTML出力用変数の初期宣言
	
	/**
	 * １．そのページのカテゴリー情報を取得
	 */
	$category = get_the_category()[0];

	// HTML先頭
	$html = '<div>';

	/**
	 * ２．カテゴリーに紐づいている投稿を全取得
	 */
	$args = [
		'category' => $category->term_id,
        'posts_per_page' => -1 // 取得投稿数を「全件」にする　※デフォルトだと5件なので注意
	];
	$category_posts = get_posts( $args );

	// カテゴリーリンクをHTMLに配置
	$html .= '<p><a href="'. get_category_link( $category->term_id ) . '">'. $category->name . '</a></p>';

	/**
	 * ３．２で取得した投稿に紐づいているタグを全取得
	 */
	// タグ重複チェック用配列
	$checked_tag = array();
	foreach( $category_posts as $cat_post ){

		// 各記事のタグを全出力する
		$tags = get_the_tags($cat_post->ID);
		/**
		 * ３-２．記事にタグが登録されているか判定し、登録されていれば全てのタグをリンクとして出力する
		 */
		if( $tags ){  							
			foreach( $tags as $tag ){
				if( in_array( $tag->name, $checked_tag) ){
					// 重複しているタグはスキップ
					continue;
				} else {
					// タグ重複チェック用
					array_push( $checked_tag, $tag->name );

					// タグリンクをHTMLに配置
					$html .= '<p><a href="'. get_tag_link( $tag->term_id ) . '">' . $tag->name . '</a></p>';
				}
			}
		}
	}
	// HTMLを出力
	$html .= "</div>";
	echo $html;
?>

HTMLはハイライト行で生成しています。
レイアウト調整したい場合はその辺りをいじっていただき、CSSをお当て下さい。

出力の様子

上記のソースコードで出力されるHTMLの構成

<div>
  <p><a href="カテゴリーアーカイブページへのリンク">カテゴリ２</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ１</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ５</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ２</a></p>
</div>

解説

ケケンタ

基本的にはソースコードに記載してあるコメント自体が解説になっていますが、イメージしづらい部分もあるかと思いますのでもう少しかみ砕いてご説明します。

まず、処理の大枠は次の通りです。

前述したように、WordPressでは直接「カテゴリー×タグ」のような関係の情報を一発で取得することが難しいです。

しかし、「投稿」を間に介することで「カテゴリー×タグ」の関係性を持つ情報を取得することが可能です。

今回は「カテゴリー」→「投稿」→「タグ」という情報連携により、そのページのカテゴリー情報に紐づいたタグ一覧を取得しています。

また、各投稿で同じタグが登録されているとタグ一覧で重複が発生してしまうため、以下の部分で一度出力したタグは2回目の出現からは出力しないよう制御しています。

ソースコードの以下の部分でタグの重複チェック

<?php 

　～省略～

		/**
		 * ３．２で取得した投稿に紐づいているタグを全取得
		 */
		// タグ重複チェック用配列
		$checked_tag = array();
		foreach( $category_posts as $cat_post ){

　　　　　　～省略～

			/**
			 * ３-２．記事にタグが登録されているか判定し、登録されていれば全てのタグをリンクとして出力する
			 */
			if( $tags ){  							
				foreach( $tags as $tag ){
					if( in_array( $tag->name, $checked_tag) ){
						// 重複しているタグはスキップ
						continue;
					} else {
						// タグ重複チェック用
						array_push( $checked_tag, $tag->name );

						～省略～
					}
				}
			}
		}

　　　　～省略～

	}
?>

まとめ

以上がWordPressでそのページのカテゴリーに紐づいているタグの一覧を出力する方法でした。

ケケンタ

以前公開した「各カテゴリーに紐づくすべてのタグ一覧を出力する」と同様に、調べてみると以外にも解説記事を見つけることができなかったため記事にまとめてみました。

この記事がお役に立ったなら何よりです。

当ブログではその他にもWordPressやWeb制作、PHPのお役立ち情報を発信しているため、ご興味のある方はぜひ他の記事もご覧いただけると嬉しいです。

それでは、最後までご覧いただきありがとうございました！

あわせて読みたい

【WordPress】各カテゴリーに紐づくすべてのタグ一覧を出力する WordPressで各カテゴリに紐づいているすべてのタグを一覧で出力したいけど、やり方が分からない……！ 今回はこのようなお悩みをお持ちの方に向けて WordPressで各カテゴ…

WordPressを使用しているとログイン画面を開く機会がちょこちょこあるかと思います。

そんな中、

ケケンタ

（見た目にちょっと飽きてきたな……）

このように感じたことはないでしょうか。

今回はそのような方のために

WordPressのログイン画面の見た目をCSSでカスタマイズする方法

を解説していきます！

WordPressのログイン画面を開く機会は多くても1日に１～２回程度かなと思いますが、実際にオリジナリティのある見た目にカスタマイズしてみるとモチベーションも上がるためオススメです。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

ログイン画面の見た目をカスタマイズする仕組み

まずは簡単にWordPressのログイン画面の見た目をカスタマイズする仕組み（ポイント）についてお話をさせていただきます。

WordPressにはフィルターフックという概念が存在します。

これは簡単に言うと

ある表示内容を出力する際、その表示内容に変更を加えるためのもの

です。

そして、WordPressのログイン画面にCSSやJavaScriptを追加するためのフィルターフックとして「login_enqueue_scripts」というものがあります。

ケケンタ

今回の作業では、このlogin_enqueue_scriptsを利用して
① 自作したCSSをログイン画面に読み込ませる
② ログイン画面の見た目が変わる
という流れを踏みます！

フィルターフック「login_enqueue_scripts」を使用すれば、ログイン画面に簡単にCSSやJavaScriptを追加できる

ログイン画面のデザインを変える手順

それでは、上記の仕組みを踏まえた上で具体的な手順をご紹介します。

① ログイン画面に設定するCSSを用意する

CSSの例

/* 背景 */
body.login {
    background-color: #fff;
}

/* ロゴ */
body.login h1 a {
    width: 250px; /* サイズ調整用 */
    background: url('画像までのパス') no-repeat center center / contain;
}

/* フォームコンテナ */
body.login form {
    background-color: #efa336;
    border-radius: 15px;
    border: none;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* 影を付けてそれっぽくしてみる */
}

/* フォームラベル */
body.login label {
    color: #fff;
}

/* ログインメッセージ全般 */
.login .message,
.login .notice,
.login .success {
    border-left: 4px solid #efa336 !important;
}

/* ログインボタン */
.wp-core-ui .button-primary {
    background-color: #fff !important;
    color: #efa336 !important;
    border-color: #efa336 !important;
}

.wp-core-ui .button-primary:hover {
    background-color: #efa336 !important;
    color: #fff !important;
    border-color: #fff !important;

}

ここで登場しているCSSクラス名についてはGoogle chromeの検証ツール（デベロッパーツール）で確認しました。
★ 「検証ツールの使い方」はこちらの記事で詳しく解説しています。

② フィルターフック「login_enqueue_scripts」を利用して①で用意したCSSをログイン画面に適用する

ここから登場するソースコードはfunctions.phpの末尾に追加して下さい。
また、その際は必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

なお、functions.phpへのソースコードの追加方法がご不明な方はこちらの章をご覧ください。

ケケンタ

login_enqueue_scriptsを利用してCSSを読み込ませる方法は大きく2パターンあります。

【パターン①】functions.phpに直接CSSを記述する

// ログイン画面のカスタマイズ
function custom_login_style() { ?>
  <style>

    /* ここにCSSを記述 */

  </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_style' );

【パターン②】CSSファイルを別に用意し、そのファイルをfunctions.phpで読み込ませる

// ログイン画面のカスタマイズ
function custom_login_style() {
  /*
   * get_stylesheet_directory_uri()以降のパス部分には
   * テーマディレクトリを基準とした相対パスを記述する
   */
  wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/作成したCSSファイル名.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_style' );

【パターン②】の例は「…省略…/テーマディレクトリ/cssディレクトリ」の中に「作成したCSSファイル名.css」を配置した想定となっています。

①は手軽にでき、②は管理性に優れているというメリットがあります。
ご自身の好みや仕様に合わせて①、②のどちらを利用するかご検討ください。

ケケンタ

functions.phpなどの扱いに不慣れな方は、とりあえず①の方法をお選びいただくのが間違いないです！

実際にログイン画面のデザインを変えてみる

変更前

完成した見た目

以下、具体的に設定した各CSS

背景

/* 背景 */
body.login {
    background-color: #fff;
}

ロゴ

/* ロゴ */
body.login h1 a {
    width: 250px;
    /* サイズ調整用 */
    background: url('画像のパス') no-repeat center center / contain;
}

フォームエリア

/* フォームエリア */
body.login form {
    background-color: #efa336;
    border-radius: 15px;
    border: none;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* 影を付けてそれっぽくしてみる */
}

フォームラベル

/* フォームラベル */
body.login label {
    color: #fff;
}

ログインメッセージ全般

/* ログインメッセージ全般 */
.login .message,
.login .notice,
.login .success {
    border-left: 4px solid #efa336 !important;
}

ログインボタン

/* ログインボタン */
.wp-core-ui .button-primary {
    background-color: #fff !important;
    color: #efa336 !important;
    border-color: #efa336 !important;
}

.wp-core-ui .button-primary:hover {
    background-color: #efa336 !important;
    color: #fff !important;
    border-color: #fff !important;

}

ケケンタ

ご覧のように自分の好きな見た目に変更することができました！

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

まとめ

いかがだったでしょうか。

やり方さえわかってしまえば、WordPressログイン画面の見た目をカスタマイズすることは意外と簡単に可能です。

（CSSの知識は必要になってしまいますが……）

ケケンタ

このように自分好みの見た目にカスタマイズできるとモチベーションも上がりますし、複数人で使用する事情から見た目を変えたいといったときにも今回の方法で実装ができます。

この記事が少しでもお役に立ったなら何よりです。

当ブログではWordPressやPHP、Web制作に関するお役立ち情報を発信しています。

ご興味のある方はぜひ他の記事もご覧いただけると嬉しいです。

それでは、最後までご覧いただきありがとうございました！

SWELLでは投稿ページのタイトルとアイキャッチ画像の並び順がデフォルトで決まっています。（タイトル→アイキャッチの順番）

しかし、SWELLはWordPressテーマ使用数No.1を誇っているだけあり、「デザインの差別化」を図りたいと考える方もいらっしゃるかと思います。

今回はそのような方に向けて

SWELLでタイトルとアイキャッチ画像の表示を
上下逆にする方法

をご紹介します。

今回ご紹介する表示のイメージ

ケケンタ

functions.phpにソースコードを追加するだけで誰でも簡単にできるので、ご興味のある方はぜひお試しください！

上述の通り、この記事でご紹介する方法ではfunctions.phpを編集します。
作業をする際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【ソースコード】タイトルとアイキャッチ画像の表示を上下逆にする

以下の２つのソースコードをfunctions.phpの最後に追加します。

タイトルの上にアイキャッチ画像を表示するための処理

/**
 * タイトルの上にアイキャッチ画像を表示する処理
 */
function my_eyecatch_on_title() {		
	// アイキャッチ画像のURL
	$thumb_url = get_the_post_thumbnail_url(get_the_ID(), 'full');

	// アイキャッチ画像が存在するなら出力
	if ($thumb_url) {
		echo '<img src="' . esc_url($thumb_url) . '" alt="' . esc_attr(get_the_title()) . '" class="my-eyecatch">';
	}
}
add_action('swell_before_post_head', 'my_eyecatch_on_title');

元々タイトルの下に表示されていたアイキャッチ画像を非表示にする処理

/**
 * 元々のアイキャッチ画像は非表示にする
 * ※これを行わないとアイキャッチ画像がダブって表示されてしまう
 */
function my_remove_swell_thumbnail($return) {
	return '';
}
add_filter('swell_parts_post_thumbnail', 'my_remove_swell_thumbnail');

ケケンタ

以上のソースコードをfunctions.phpの最後に追加することでタイトルとアイキャッチ画像の表示順序を上下逆にすることが可能です。

子テーマのfunctoins.phpにソースコードを追加する手順はこちら
※このページ内で移動します。

タイトルの上に表示したアイキャッチ画像の下の余白を調整する

ただし、素の状態だとアイキャッチ画像とタイトルの間の余白が狭いため、CSSで少し調整します。

以下のソースコードを「外観」→「カスタマイズ」→「追加CSS」の最後に追加します。

.my-eyecatch {
    margin-bottom: 2em !important;
}

.my-eyecatchは前章でご紹介した「アイキャッチを表示する処理のimgタグに与えているCSSクラス」です。
これにCSSプロパティを当てることでアイキャッチ画像とタイトルの間の余白を調整しています。

「追加CSS」に追加する

CSS追加したら右上の「公開」ボタンを忘れずにクリックしましょう。

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

まとめ

以上が「SWELLでタイトルとアイキャッチ画像の表示を上下逆にする方法」でした。

SWELLは利用者数が多い分、デザイン面で他の方と被りが発生しがちという側面も持ち合わせています。

（それでもカスタマイズ性が非常に高いためオリジナリティを出すことは十分可能です）

今回の方法を用いることで、各投稿記事のデザインで差別化が図れます。

ケケンタ

有料テーマのSWELLはカスタマイズ性が非常に高く、操作も簡単です！

それだけに、こうしたソースコードを利用したカスタマイズが他の方との違いを生み出しやすくなります。

このブログではWordPressやPHP、Web制作に関するお役立ち情報を発信していますので、ご興味のある方はぜひ他の記事もご覧いただけると嬉しいです。

それでは最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

 SWELL記事一覧

今回ご紹介した内容のテーマ 

＼　19,800円・買い切り　／

今すぐSWELLを購入する　>>

WordPressでは簡単に固定ページや投稿ページを保護し、パスワードを知っている人にしかコンテンツが表示されないように設定することが可能です。

ただ、保護されたページにはデフォルトだと以下のように「保護中：」という文字列が表示されます。

保護ページ初期タイトル表示

この「保護中：」という文字列を変更したい、あるいは削除したいという方に向けて

WordPressで保護したページタイトルに出力される
「保護中：」という文字列を変更・削除する方法

ケケンタ

誰でも簡単にできるのでぜひお試しください！

この記事でご紹介する方法はfunctions.phpを変更するものになります。
作業の際は必ずバックアップをお取りいただき、自己責任のもとで作業をお進めください。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

保護ページのタイトルを変更する方法

ケケンタ

まずは「保護ページのタイトルを変更する方法」からご紹介します。

functions.phpに以下のソースコードを追加します。

functions.phpに追加するソースコード

// 保護ページタイトルの変更
function edit_protected_word() {
	return '任意のテキスト：%s';
}
add_filter('protected_title_format','edit_protected_word');

実際に出力される様子

ご覧のように「保護中：」だった部分が「任意のテキスト：」に変わっています。

ケケンタ

例えば「保護中：」を「会員のみ：」にしたければ
会員のみ：%s
にすればいいということですね。
※「：」は可読性を残す意味でそのままにしてありますが、不要なら除去してもOKです。

保護ページに表示される「保護中：」を削除する方法

次は「『保護中：』という文字列を削除する方法」についてご紹介します。

理屈は前章と同じで、「%s＝ページタイトル」だけを残すように書き換えればOKです。

functions.phpに追加するソースコード

// 保護ページタイトルの変更
function edit_protected_word() {
	return '%s';
}
add_filter('protected_title_format','edit_protected_word');

実際に出力される様子

ケケンタ

このように「%s」だけにしてあげることで、表示されるのがそのページのタイトルだけとなります。

WordPressはカスタマイズ性が高いCMS

以上が「保護ページにデフォルトで出力される『保護中：』を変更・削除する方法」でした！

WordPressは非常にカスタマイズ性が高く、「こんなことってできないのかな」と思ったことは割とできることが多く、またそうした情報も誰かがネット上で解説をしてくれています。

ケケンタ

このブログでもWordPress関連のカスタマイズ情報をたくさん発信しています。
ご興味のある方はぜひ他の記事もご覧ください。

それでは、最後までご覧いただきありがとうございました。