ダミー

MW WP Form 画面遷移しない原因は キャッシュだった

MW WP Form はウェブサイトにフォームを設置するWordPressのプラグインです。入力画面 > 確認画面 > サンクス画面 と遷移するので人気があります。Google reCAPTCHA にも対応しています。今回はこの MW WP Form を使ったお問い合わせフォームが突然画面遷移しなくなくなる不具合について解消法をご紹介します。

当記事の環境:WordPress 5.8、MW WP Form 4.4.0、WP Fastest Cache 0.9.3

現象の確認

複数の環境で確認したところ
・スマホはiPhone、Android共に問題はない
・AさんのWindows+Chromeでは正常、BさんのMac+Safariでは正常、それ以外の組み合わせで入力後確認画面に遷移しない
・テストサーバーに移設すると正常
つまり、本番サーバーでかつ特定のOS、特定のブラウザのときに不具合が起ることがわかりました。

フォームのページを WP Fastest Cacheの対象から除外する

調査を進めるうちにキャッシュが影響していると思われたので、フォームページをキャッシュから除外することにしました。当該サイトではキャッシュコントロールのプラグインとして WP Fastest Cache を使っていましたので、以下はWP Fastest Cache での方法となります。

「WP Fastest Cache の設定」の「除外する」タブから、除外するページにルールを追加します。特定のページを除外する場合は「Is Equal To」とそのページのスラッグ(例:contact など)を指定します。確認画面、サンクス画面がある場合はそれらも除外しましょう。

WP Fastest Cache

動作にばらつきがあったワケ

Webのお仕事をしていると「スマホでうまくいかない」「WindowsのIEだけうまくいかない」「Mac Safariだけうまくいかない」ということがよく起こります。
ところが、今回は不具合が起こる組合せがすぐにわからずプチパニックになりましたが、それにはちゃんとワケがあったのです。
落ち着いて WP Fastest Cache の設定を見ると以下のように
「ログインユーザーに対してキャッシュを表示しない」
「モバイルユーザーにデスクトップ版のキャッシュを表示しない」
にチェックを入れています。

例えば特定のブラウザだけ不具合が起こらなかったのは、そのブラウザでWordPressにログインした状態で送信していたから。
スマートフォンで不具合が起こらなかったのはモバイルユーザーにキャッシュを表示しない設定になっていたから。
つまり不具合が起こらなかった環境では元々キャッシュを表示しない設定だったのです。

また、設置したときに送信テストしても、その時点ではキャッシュが効いてないので問題は起こりません。

WP Fastest Cache

参照サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。
MW WP Form FAQ

BackWPup はWordPressのバックアップを取るプラグインです。手動バックアップのほか、時間を指定して自動でのバックアップも可能です。眠っている間に自動的にバックアップがされているので便利で安心です。バックアップ毎にログ(記録)も保存されています。今回はログを調べていたときエラーを発見しました。

当記事の環境:WordPress 5.8、MW WP Form 4.4.0、BackWPup 3.10.0

BackWPup のエラー

BackWPup › ログ の画面でステータスに「1件の警告」と表示されているジョブがあります。

BackWPup

ジョブ名をクリックするとログの内容が表示されます。警告は黄色い背景で表示されます。
警告を読んでみます。
「警告: ファイル名 “.tmb/xxxxx.png” は長すぎて TarGz アーカイブへ正しく保存できません !」
実際のxxxxxは100桁を超すランダムな文字列です。拡張子はpngだから、画像かと推測できます。
それにしても、こんなディレクトリもファイルも以前は無かったし、こんな長いファイル名誰もつけないし、そして
.tmbって何!?

BackWPup

自動生成されたディレクトリ

WordPressをインストールしたディレクトリに.tmb と.quarantine という2つのディレクトリが自動的に生成されたようです。.tmbはいかにも一時ファイル的なお名前で上記のようにpngファイルがいくつか入っています。
一方.quarantineは空です。
これは何だ?何故できたのか?削除してもいいのか?
「削除してもいい」という記事を見つけ削除してみました。何も起こりません。問題なさそうです。
バックアップをしてみると正常終了しました!
.tmb(の中のファイル)がエラーの原因だったようです。
今しばらくようすを見ています。変化があれば報告します。「大きな画像をアップロードすると.tmb ができる」という記事も散見され、実際当該サイトは運営ご担当者様が大きな画像を何枚もアップロードされていました。
一般の方からすれば大きい方が画質がきれいだし、アップロードするときに何もメッセージが出なかったので、どうしてダメなの?という感じかも知れません。

BackWPup

参照サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。
tmb gets in the way of backup

All in One SEO(以降aioseo)はSEOに必要な機能が揃ったプラグインですが、4.0~ではトップページを固定ページにするとtitleタグにその記事のタイトルが正しく書き出されません。これは不具合ではなく仕様だそうです。そのためネット上では3.7.1にダウングレードする方が散見されます。
ここで「そうまでしてaioseo使い続けたいか?」と疑問が湧きます。結論として「重いし場所も取るし要らないよね」。入力画面に大きく居座ってタブもいっぱいあって、初心者にはわかりにくいし、もうそろそろ〇〇(停止?削除?お別れ?)しよう。
というわけで、aioseoを使わずSEOに必要なタグをテーマに書き出す方法をご紹介します。

ディスクリプション入力フィールドの設置

投稿記事は「抜粋」をディスクリプションにします。固定ページは抜粋がないのでディスクリプションを入力するカスタムフィールドを作ります。
今回はCustom Field Suite(以降CFS)というプラグインで「seo_description」という名前のフィールドを作りました。なので、当記事ではCFSで入力された値を取得する説明になりますが、お好きな方法でカスタムフィールドを作ってください。

aioseのメタディスクリプションを抜粋に移動

「抜粋」をディスクリプションにする?今までせっせとaioseoのメタディスクリプションに入力していたけど抜粋は空です。過去の記事全部メタディスクリプションを抜粋にコピー&ペーストしないといけないの!? と筆者も思いましたが、それをやってくれるプラグインが公開されていました。

ディスクリプション

functions.phpに以下を追加し、my_description()という関数を作ります。

function my_description() {
    $SEO_description = CFS()->get( 'seo_description' );
    if(has_excerpt()){
        $description = get_the_excerpt();
    }elseif(!empty($SEO_description)){
        $description = CFS()->get( 'seo_description' );
    }else{
      $description = 'ここに抜粋もseo_descriptionも入力されていなかったとき用の固定のディスクリプションを書きます。';
    }
    return $description;
}

ogp画像

アイキャッチ画像(サムネイル)をogpにするため、functions.phpに以下を追加し、my_ogp()という関数を作ります。

function my_ogp() {
    if(has_post_thumbnail()){
        $ogp_image = get_the_post_thumbnail_url( get_the_ID() );
    }else{
        $ogp_image = home_url().'サムネイルがないいときに表示されるogp画像をホームからのpath付きで指定';
    }
    return $ogp_image;
}

タグの書き出し

header.phpなどにあるテーマのヘッダ部分に必要なタグを書いていきます。
まずcharsetの直下にtitleタグを挿入します。

    <meta charset="UTF-8">
    <title><?php the_title(); ?> | サイト名</title>
適切な位置にdescriptionとcanonicalを書きます。
    <meta name="description" content="<?php echo my_description(); ?>">
    <link rel="canonical" href="<?php the_permalink(); ?>" />
ogpに関する記述例です。
    <meta property="og:site_name" content="<?php the_title(); ?> | サイト名">
    <meta property="og:type" content="article">
    <meta property="og:title" content="<?php the_title(); ?> | サイト名">
    <meta property="og:description" content="<?php echo my_description(); ?>">
    <meta property="og:url" content="<?php the_permalink(); ?>">
    <meta property="og:image" content="<?php echo my_ogp(); ?>">
    <meta property="og:image:secure_url" content="<?php echo my_ogp(); ?>">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:domain" content="<?php echo $_SERVER["HTTP_HOST"];?>">
    <meta name="twitter:title" content="<?php the_title(); ?> | サイト名">
    <meta name="twitter:description" content="<?php echo my_description(); ?>">
    <meta name="twitter:image" content="<?php echo my_ogp(); ?>">
    <meta name="twitter:site" content="TwitterのID">

参照サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。

【2021年版】All in One SEO 4.x~の不具合とダウングレードの方法

Copy SEO Meta Desc “Custom Field” to Excerpt field?

All in one SEOのdescriptionを本文抜粋に移行する

今回はWordPressの新しい記事にNEWなどのマークを付ける方法をご紹介します。
当記事の環境:WordPress バージョン 5.7.2

最近30日以内の記事にNEWマークを付ける

以下のように、最近の記事にNEWマークを付けたいときに使います。

  • 昨日書いた記事ですNEW
  • 最近の記事です NEW
  • 1ヶ月以上前の記事です
  • 半年前の記事です
<?php
$days = 30; //30日以内の記事にNEWを付ける
$daysInt = ($days-1)*86400; //NEW期間を秒に換算
$today = time(); //今日の日付をエポック秒に換算
$entry = get_the_time('U'); //記事投稿時間をエポック秒で取得
$dayago = $today-$entry;
if ($dayago < $daysInt): ?>
	<!--ここに新しい記事のときの記述を書きます-->
<?php else: ?>
	<!--ここに新しい記事でないときの記述を書きます-->
<?php endif; ?>

みなさんはWordPressの投稿記事にタグを入れていますか?
今回はタグの扱いについてご紹介します。
当記事の環境:WordPress バージョン 5.7.2

投稿記事一覧でタグを併記したい

以下のように、記事タイトルの下にその記事で使われているタグを列記したいときに使います。

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php if(has_tag()==true){the_tags();} ?>

もしタグを使っていれば the_tags(); を出力。
the_tags(); だけでタグとそのタグの付いた記事一覧へのリンクが書き出されます。とても便利ですね。タグの記事一覧ページがちゃんと作られるようにしておきましょう。

最近使われたタグをn個、リンク付きで書き出す

以下のように、最近使われたタグを数指定して列記したいときに使います。

<?php
    $term_list = get_terms('post_tag', Array('number' => 10));
    $result_list = [];
    foreach ($term_list as $term) {
    $u = (get_term_link( $term, 'post_tag' ));
    echo '<a href="'.$u.'">#'.$term->name.'</a>';
    }
?>

こちらもタグの記事一覧ページにリンクしますので、記事一覧ページがちゃんと作られるようにしておきましょう。

タグの記事一覧ページ

とてもシンプルなタグの記事一覧ページのテンプレートサンプルも書いておきます。必要に応じてCSSで装飾してお使いください。
<h1>タグ #<?php single_tag_title(); ?></h1>
<?php
    $current_tag = single_tag_title( '', false );
    $args = array(
        'posts_per_page' => 20,
        'orderby'        => 'date',
        'order'          => 'DESC',
        'tag'            => $current_tag,
        );
    $Posts = get_posts($args);
    if($Posts) :
        foreach($Posts as $post) :
            setup_postdata( $post );
?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php
    if(has_tag()==true){the_tags();}
        endforeach;
    else:
        echo '<p>このタグの付いた記事はありません。</p>';
    endif;
?>
タグを扱うのは面倒なようで意外と簡単です。みなさんも作ってみてください。