Webデザイナー 日々のメモ

WordPressで投稿ページを非公開にすると404エラーが表示されて困ったことはありませんか？

例えば、求人情報サイトや不動産物件サイトなどで、掲載情報が終了して詳細ページを非公開にすると、WordPressのデフォルト設定では404エラーとなってしまいます。
再訪した人が404エラーを見ると、URLを間違えたかな？あの情報どうなったのかな？など訪問者に誤解や混乱を与えてしまいます。

404エラーではなく掲載終了ページを表示することで、訪問者により分かりやすく、親切な体験を提供することができます。

今回この記事では、ページを非公開化した際の404エラーを適切なページ（掲載終了ページ）にリダイレクトする方法を解説していきます。

この設定を行うことで不用意な404エラー表示を回避し、サイトの信頼性とユーザー満足度を向上させることが可能になります。
以下のコードをfunctions.phpに記述することで、特定の条件を満たす非公開ページを自動的にリダイレクトできます。

function redirect_private_page_404() {
    if (is_404() && strpos($_SERVER['REQUEST_URI'], '/detail/') !== false) {
        wp_redirect(home_url('/close-page/'));
        exit;
    }
}
add_action('template_redirect', 'redirect_private_page_404');

それぞれ一行ずつ処理を見ていきます。

function redirect_private_page_404() {
redirect_private_page_404という名前の関数を定義し、特定の条件下でリダイレクト処理を実行。

if (is_404() && strpos($_SERVER['REQUEST_URI'], '/detail/') !== false) {
条件分岐のif文の開始

is_404()・・・404エラーページであるかどうかをチェックし、404エラーページの場合trueを返す。
$_SERVER['REQUEST_URI']・・・現在のページのURLを取得するスーパーグローバル変数

strpos($_SERVER['REQUEST_URI'], '/detail/')・・・$_SERVER[‘REQUEST_URI’]の中に/detail/という文字列が含まれているかチェックする関数。文字列が含まれている場合、その文字列の開始位置（0以上の整数）を返し、含まれていない場合falseを返す。
!== false・・・strpos()の結果がfalseでないかどうかをチェック（＝URLに/detail/が含まれているかどうかのチェック）
&&・・・AND演算子で、両方の条件がtrueの場合にif文の中の処理が実行される。（＝「現在のページが404エラー」かつ「URLに/detail/が含まれている」場合、次の行の処理が実行される。）

wp_redirect(home_url('/close-page/'));
関数wp_redirect()を使用して、指定されたURLにリダイレクト。（※このままでは302での転送。301での転送は下記参照）

home_url('/close-page/')・・・関数home_url()を使用して、サイトのホームURLに/close-page/を付け加えたURLを生成します。

exit;
exitステートメントでスクリプトの実行を終了し、リダイレクト後、不要な処理が実行されるのを防ぐ。

} if文の終わり

add_action('template_redirect', 'redirect_private_page_404');
関数add_action()を使用して、redirect_private_page_404関数をtemplate_redirectアクションフックに登録。template_redirectアクションフックは、WordPressがテンプレートを読み込む前に実行されるアクションなので、WordPressがページを表示する前にredirect_private_page_404関数が実行され、条件に一致する場合にリダイレクト処理が行われる。

301での転送方法（推奨）

上記の設定では302での転送になってしまうので、301で転送したい場合、以下のようにwp_redirect()関数の第2引数に、HTTPステータスコード301を指定することで、301リダイレクトに変更できます。

function redirect_private_page_404() {
    if (is_404() && strpos($_SERVER['REQUEST_URI'], '/detail/') !== false) {
        wp_redirect(home_url('/close-page/'), 301);
        exit;
    }
}
add_action('template_redirect', 'redirect_private_page_404');

さくらサーバーではhtaccessでファイルアップロードの容量を拡張設定をします。

WordPressのデフォルトの設定の【前】に追記していきます。

php_value upload_max_filesize 10M
php_value post_max_size 10M
php_value memory_limit 10M
php_value max_execution_time 300
php_value max_input_time 300

最後の2行の記述が抜けると正常動作しないので気をつけてください。

php_value max_execution_time 300
php_value max_input_time 300

関連記事：https://www.uki213.com/memo/expand-file-capacity/

参考：https://help.servmask.com/2018/10/27/how-to-increase-maximum-upload-file-size-in-wordpress/
https://www.sejuku.net/blog/63154

Contact Form 7の各パーツにclassやidを付けます。
画面上からの選択ボタンで入力することも出来ますが、
テキストで直接入力していったほうが早いので簡単なものは覚えておくと便利です。

送信ボタン

class、idの記述順序を間違うと反映されないみたいなので注意が必要…
「送信する」などのテキストラベルの前にclassやidを記述しないと反映されないようです。

[submit class:aaa id:bbb "送信する"]

複数のclassを付ける

複数のclassを付ける場合、以下のようにします。
class:”aaa bbb ccc”のようにまとめたカタチではなく、class:aaa class:bbb class:cccと各class分割したカタチで記述します。

[email* your-email class:aaa class:bbb class:ccc]

selectボックスの初期値

selectボックスに初期値として「選択してください」を入れておきたい場合は
first_as_labelを使用し以下のように記述します。

[select* birthday first_as_label "選択してください" "aaa" "bbb" "ccc"]

参考：https://contactform7.com/ja/submit-button/
https://tech.kurojica.com/archives/15404/
https://tips.adrec-dept.com/wordpress/1596/

お名前.comレンタルサーバー で
ファイルアップロードの容量を拡張するのは少しクセがあります。

一般的なサーバーではhtaccessなどで設定しますが、
お名前.comレンタルサーバー はphp.iniで設定します。

php.iniを各ドメインのルートディレクトリに設置することで
ファイル容量を拡張できます。

下記の設定は50MBに拡張する場合の記述例です。
50の数字を変えることで上限を変更できます。

全て同じ数字にしておくのが一番簡単ですが、
「memory_limit」の数値が一番大きく、「upload_max_filesize」が一番小さく設定する必要があります。
上からmemory_limit > post_max_size > upload_max_filesizeという関係にします。

[PHP]
memory_limit = 50M
post_max_size = 50M
upload_max_filesize = 50M
[/PHP]

WordPressの移行などにAll-in-One WP Migrationを使う場合にファイル容量の拡張が必要になる場面が多いので覚えておくと便利です。

参考：https://kikushima-japan.co.jp/work-blog/お名前レンタルサーバーのファイルアップロード/
https://www.vektor-inc.co.jp/post/upload_max_filesize/

WordPressにプラグインのWP-PageNaviを使ってページネーションを表示する場合、
2ページ目以降が404エラーになってしまう場合があります。

通常、パーマリンク設定やクエリの設定に関連している場合が多いですが、
以下のステップで問題の所在を確認していきます。

1. パーマリンク設定の確認

WP-PageNaviを正しく動作させるには、WordPressのパーマリンク設定が適切に構成されていることが重要です。WordPressの管理ダッシュボードから「設定」→「パーマリンク」に移動し、パーマリンク設定を確認します。一般的な設定としては、「投稿名」を選択することが多いです。設定を変更した場合は、設定を保存して変更を反映させてください。

2. functions.phpファイルの確認

functions.phpファイルにはページネーションに関連するカスタムクエリが記述されている場合があります。ページネーションのクエリが正しく設定されていることを確認します。

記述や設定がされている場合、そのコードがページネーションを正しく処理するようになっていることを確認します。また、このコードが他のカスタムルールと競合していないかも確認します。

3. WP-PageNaviプラグイン設定の確認

WP-PageNaviプラグインの設定を確認し、正しい設定が行われているかを確認してください。WP-PageNaviプラグインの設定画面から、ページネーションの挙動に関する設定を確認できます。

4. テーマの問題

問題の発生している一覧ページのテンプレートファイル（tag.phpやarchive.phpなど）が正しく設定されているか確認します。テーマファイルに問題がある場合、ページネーションが正しく動作しないことがあります。

これらのステップを確認して、問題を解決するのに役立つ情報を得ることができます。
問題が解決しない場合、ページネーションに関連する他のプラグインやカスタムコードが問題の原因である可能性があるため、それらも確認することが重要です。

URLからcategoryを削除するなど、カテゴリー一覧ページに独自の設定をしたことで、
タグ一覧ページの2ページ目以降が表示されない（404になる）ケースを例に修正方法を見ていきます。

上記の「2. functions.phpファイルの確認」にページネーションを設定する記述があったため、
その記述と競合しない新たなルールを加えました。

function custom_tag_pagination_rewrite_rule($rules) {
    $new_rules = array(
        'tag/(.+)/page/([0-9]{1,})/?$' => 'index.php?tag=$matches[1]&paged=$matches[2]',
        'tag/(.+)/?$' => 'index.php?tag=$matches[1]',
    );

    return $new_rules + $rules;
}

function custom_category_pagination_rewrite_rule($rules) {
    $new_rules = array(
        'category/(.+)/page/([0-9]{1,})/?$' => 'index.php?category_name=$matches[1]&paged=$matches[2]',
        'category/(.+)/?$' => 'index.php?category_name=$matches[1]',
    );

    return $new_rules + $rules;
}

add_filter('rewrite_rules_array', 'custom_tag_pagination_rewrite_rule');
add_filter('rewrite_rules_array', 'custom_category_pagination_rewrite_rule');

URLからcategoryを削除しつつ、tagは残し、タグ一覧ページの2ページ目以降が正常に認識され表示されるようになりました。

WordPressでは、カスタムフィールドは通常検索対象になりません。
テンプレートなどを利用していて、検索機能が独自のカスタマイズされていると、カスタムフィールドの値を検索対象にする機能の追加は一苦労です。

カスタムフィールドの値を、投稿本文にコピーすると簡単に検索対象に出来ます。

CSVで一括投稿する場合や、ダッシュボードの投稿画面から情報を入力する場合に
カスタムフィールドの値を取得し、連結、投稿本文（post_content）にコピーするコードをfunctions.phpに追加します。

function update_post_content_with_custom_fields( $post_id ) {
    // 投稿の編集中でない場合や、カスタムフィールドの更新中である場合は処理しない
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return;
    if ( defined('DOING_AJAX') && DOING_AJAX ) return;
    if ( 'post' !== get_post_type( $post_id ) ) return;
    // 更新処理中フラグが設定されている場合は処理しない
    if ( get_post_meta( $post_id, '_updating_post_content', true ) ) return;
    // カスタムフィールドの値を取得します。
    $custom_fields = array(
        '項目１',
        '項目２',
        '項目３',
        '項目４',
        '項目５',
    );
    $post_content = '';
    // カスタムフィールドの値を連結します。
    foreach ( $custom_fields as $field_name ) {
        $field_value = get_post_meta( $post_id, $field_name, true );
        if ( ! empty( $field_value ) ) {
            $post_content .= "<strong>{$field_name}:</strong> {$field_value}<br>";
        }
    }
    // post_contentを更新します。
    if ( ! empty( $post_content ) ) {
        // 更新処理中フラグを設定
        update_post_meta( $post_id, '_updating_post_content', true );
        $post = array(
            'ID' => $post_id,
            'post_content' => $post_content,
        );
        // save_post アクションを一時的に無効化
        remove_action( 'save_post', 'update_post_content_with_custom_fields' );
        // 投稿を更新
        wp_update_post( $post );
        // save_post アクションを再度有効化
        add_action( 'save_post', 'update_post_content_with_custom_fields' );
        // 更新処理中フラグをクリア
        delete_post_meta( $post_id, '_updating_post_content' );
    }
}
// 投稿が保存される際に呼び出すアクションフックを追加します。
add_action( 'save_post', 'update_post_content_with_custom_fields' );

function copy_custom_fields_to_post_content_on_import( $post_id ) {
    // インポート中の投稿かどうかを確認
    if ( defined('WP_IMPORTING') && WP_IMPORTING ) {
        // カスタムフィールドの値を取得します。
        $custom_fields = array(
            '項目１',
            '項目２',
            '項目３',
            '項目４',
            '項目５',
        );
        $post_content = '';
        // カスタムフィールドの値を連結します。
        foreach ( $custom_fields as $field_name ) {
            $field_value = get_post_meta( $post_id, $field_name, true );
            if ( ! empty( $field_value ) ) {
                $post_content .= "<strong>{$field_name}:</strong> {$field_value}<br>";
            }
        }
        // post_contentを更新します。
        if ( ! empty( $post_content ) ) {
            $post = array(
                'ID' => $post_id,
                'post_content' => $post_content,
            );
            wp_update_post( $post );
        }
    }
}
// 投稿が保存される際に呼び出すアクションフックを追加します。
add_action( 'save_post', 'update_post_content_with_custom_fields' );
// インポート時にもカスタムフィールドの値を post_content にコピーするためのアクションフックを追加します。
add_action( 'import_post_created', 'copy_custom_fields_to_post_content_on_import' );

前半部分は投稿画面からの更新でのコピー。 後半部分はCSVインポート時のコピーです。

前半部分は単体で使えますが、後半部分は前半部分の機能を一部使っているのでそのままでは使えません。
CSVインポートの時だけ値をコピーする場合は少しカスタマイズが必要になります。

プラグインを使うと目次を自動的に付けることが出来ます。
様々なプラグインがありますが、Easy Table of Contentsが細かな設定が出来るので使いやすいです。

Easy Table of Contents

参考：https://www.onamae.com/column/wordpress/11/

Favorite

カテゴリーIDからカテゴリー一覧ページへのURLを取得するコードを記述しておくことで
カテゴリー名やスラッグを変更してもURLが自動的に修正されます。

※「カテゴリーID」には数字を入れます。

<?php echo esc_url(get_category_link('カテゴリーID')); ?>

参考：https://hacknote.jp/archives/6022/

WordPressの記事に紐付いたタグを取得するためのコードです。
get_the_tagsを使用します。

WordPressに登録されている全てのタグを取得する場合はget_tagsを使用します。
get_tagsの使い方はコチラの記事でサイドバーへのタグ一覧表示方法にて紹介しています。

基本

<?php the_tags('前', '区切り文字', '後'); ?>

タグの名前だけを表示

下記の参考コードはタグ名の前後をspanで囲うようにしています。

<?php 
  $tags = get_the_tags();
  foreach ( $tags as $tag ) {
    echo '<span>' . $tag->name . '</span>';
  }
?>

その他

上の参考コードの4行目をそれぞれ変えると出力できます。

参考：http://kawatama.net/web/629
https://thewppress.com/libraries/get-the-tags-array/
https://design-tera.com/blog/archives/2387/
https://recooord.org/wordpress-get-the-tags/

記事に紐付いているカテゴリーをひとつだけ取得する場合、
一行の簡単なコードの記述で取得が可能です。

カテゴリー名の取得

<?php echo get_the_category()[0]->name; ?>

スラッグの取得

<?php echo get_the_category()[0]->slug; ?>

リンクURLの取得

<?php echo get_category_link(get_the_category()[0]->term_id); ?>

カテゴリーIDの取得

<?php echo get_the_category()[0]->cat_ID; ?>

参考：https://wordpress-web.and-ha.com/post-category-name-id-slug/

WordPressで作り込んだデザインなどを実装する場合、
複数カテゴリーを選択できるより、ひとつの記事にひとつのカテゴリーとしておいたほうが
便利な場合が多くあります。

使用しているテンプレートのfunctions.phpに以下のコードを記述します。

//カテゴリーをラジオボタン化
function change_category_to_radio() {
  ?>
<script>
jQuery(function($) {
  // ラジオボタン化
  $('#categorychecklist input[type=checkbox]').each(function() {
    $(this).replaceWith($(this).clone().attr('type', 'radio'));
  });
  // 「新規カテゴリーを追加」を非表示
  $('#category-adder').hide();
  // 「よく使うもの」を非表示
  $('#category-tabs').hide();
});
</script>
<?php
  }
add_action( 'admin_head-post-new.php', 'change_category_to_radio' );
add_action( 'admin_head-post.php', 'change_category_to_radio' );

参考：https://junpei-sugiyama.com/wp-category-radio/

WordPressのサイドバーにタグ一覧を表示するためのコードです。

記事に紐付いたタグの取得はコチラの記事をご参照ください。

登録されている全てのタグを表示

こちらはシンプルに登録されているタグを全て表示するだけのコードです。
登録されている全てのタグを取得するのでget_tagsを使います。

<ul>
  <?php
  $posttags = get_tags();
  if ($posttags) {
    foreach($posttags as $tag) {
      echo '<li><a href="'. get_tag_link($tag->term_id) .'">' . $tag->name . '</a></li>';
    }
  }
 ?>
</ul>

タグの表示件数を制限する

先程のコードは100件でも200件でも登録されただけタグが表示されてしまうので
上位○件というように表示件数を制限するコードになります。

6行目の'number' => 20という部分が20件表示の設定になるので
適宜デザインや登録件数に併せて変更してみてください。

<ul>
<?php
$args = array(
  'orderby' => 'count',
  'order' => 'desc',
  'number' => 20
);
$tags = get_terms('post_tag', $args);
foreach($tags as $value) {
  echo '<li><a href="'. get_tag_link($value->term_id) .'">'. $value->name .'</a></li>';
}
?>
</ul>

参考：https://shu-naka-blog.com/website/wp-taglist2/

WordPressでサイトを構築する際によく使うコード

今回は
「現在のページのURLを取得するコード」

<?php echo get_the_permalink();?>

参考：https://cms-hikaku-navi.com/column/5694/

WordPressでサイトを構築する際や
公開前に記事を準備するのに、サイト全体にパスワード設定をして
見れない状態にしておきたいものです。

WP自体がhtaccessに設定を書き込んだりもするので
あまりいじりたくない部分であったりもするし、
AWSではhtaccessがデフォルト状態では使えないため
プラグインなどで設定するのが簡単です。

Password Protected

参考：https://kinsta.com/jp/blog/password-protect-wordpress-site/

Favorite

ウェブサイトのSSL化はSSHを使いコマンドで実行する必要がありますが、
Lightsailには、Bitnami HTTPS Configuration Toolという専用のツールが用意されています。

Bitnami HTTPS Configuration Toolは

・証明書の取得
・HTTPSへのリダイレクト
・www有・無（リダイレクト）
・cronでの自動更新

を設定してくれるツールになります。

複雑なコマンドを実行せずにSSL化する事が可能になる便利なツールです。

LightsailのWordPressをSSL化する手順

SSHクライアント、もしくはLightsailのコンソールから
コマンドを実行していきます。

1. 以下のコマンドを実行します。
※アップデートするか聞いてくる場合は「Y」と入力して、再度同じコマンドを実行します。

sudo /opt/bitnami/bncert-tool

2. Domain listにSSL化するドメインを入力します。

3. www付きのドメインが含まれていない場合、対象に含めるか確認されます。
含める場合は「Y」、含めない場合は「n」を選択してください。

4. HTTPからHTTPSへのリダイレクトを有効にするか聞いてきますので「Y」を入力します。

5. www無しのドメインからwww有りのドメインにリダイレクトするか確認されます。
希望する場合は「Y」、しない場合は「n」を選択してください。

6. www有りのドメインからwww無しのドメインにリダイレクトするか確認されます。
希望する場合は「Y」、しない場合は「n」を選択してください。

7. 設定内容が表示されるので確認します。

8. 証明書に関連付けるメールアドレスを入力します。

9. 契約内容が表示されるので確認します。問題なければ「Y」を入力します。
※契約内容にはリンクがあります。

10. SSL化の処理が正常に完了した場合「Success」と表示されます。

11. Enterキー押して完了です。

12. ウェブサイトが正常にSSL化されていることを確認します。

参考：https://soma-engineering.com/wordpress/set-ssl-letsencrypt-lightsail/2021/03/07/

Favorite