BLOG

ホーム
BLOG
作業メモ

作業メモ
2021.09.20
MW WP Formで未入力のエラーメッセージがずっと消えず確認画面から先に進めない

僕はワードプレスでサイトを作成した際、お問い合わせフォームはメールフォームプラグイン「MW WP Form」をよく使用しております。コンタクトフォーム7より細かな設定が可能なので重宝してます。今回は誰かが作ったサイトを修正するという案件があり、「MW WP Form」がうまく動作せず3時間くらいハマりました。。調べるとリダイレクトのループエラーに関する記事ばかりで、意外と同じ現象の記事が見つからなかったので、メモに残しておきます。不具合の内容設定は下記のようにしております。 ①初めてページを開くとURLは問題なくhttps//○○/contact/になっている。②必須項目を無視して確認画面ボタンを押すと「未入力です」のエラーがでる。③ページを戻っても進んでもずっと「未入力です」のエラーメッセージが消えず先に進めない。（厳密には、戻ってもcontact/check/のページにリダイレクトされている）このように、初回の1回だけがhttps//○○/contact/で、2回目以降はずっと確認画面のままという現象になってしまいます。キャッシュをクリアしても変わらない。。試行錯誤した内容色んな記事を参考にしてあらゆる原因を探しました。キャッシュ系のプラグインを無効化htaccessファイルをいじったりテーマをデフォルトに変更して試したりしかし原因が全くわからなかったです。。解決した方法ずばり、これでした！原因は、すごい初歩的なミスでした。フッターに必ず記述しなければならないこの記述が抜けていたのでした。。。フッターに上記の記述をいれたら無事に動作しました。誰かが作ったサイトの場合、どのようにコーディングしているかを把握するのが大変ですよね。こういう問題がよく起きるので注意です。同じような事でつまづいている方のお役に立てれば幸いです。プラグインがちゃんと動作しない場合は、まず基本的なこういう部分をまず疑うといいと思います！
作業メモ
2021.09.08
matchHeight.js(マッチハイト)が一部効かない時の原因

横並びの要素の高さを揃える為にmatchHeight.jsをよく使っております。とても便利なので個人的には1サイトに1回は必ず使うと言っていいほど、よく使用しております。 matchHeight.jsについての説明は省略させていただきますので、知りたい方はこちらこちらからダウンロードしてみてください。ちゃんと効いているのになぜか反映されない！自分はよく使うのにも関わらず、たまに「あれ？効かない」ってなる時があるのですが、いつも決まって同じ原因につまずく時がありますので、メモに残しておきます。まず、対象箇所でちゃんとmatchHeight.jsが効いているかどうかを確認しましょう！僕の場合は、「F12」のデベロッパーツールで確認してます。対象箇所にインラインで「style=”height: ○○px;”」と記述が追加されているかを確認してください。上記の例だと「style=”height: 527px;”」というスタイルが効いていたら、問題なくJSが効いていますね。ローカルでは問題ないのに、テストアップするとなぜか効かない！という場合の原因は、ページを読み込む時にまだ高さを取得されていない状況でmatchHeight.jsが実行されてしまっているせいで、高さが揃わないという現象が出てしまいます。なので、「ページをちゃんと読み込んみ終わった後にmatchHeight.jsを効かす」という処理が必要になってきます。画像などの重たい要素と高さを揃えたい場合よくこの現象がおきます。なので、その場合は下記の方法でほぼ解決すると思います。 $(window).load(function(){});で囲ってください。これでちゃんとページの読み込み後に処理が実行されるので、問題なく高さが表示されますね。もし同じような事で、つまずいている方がいらっしゃたら是非試してみてください。
作業メモ
2021.07.23
WordPressの記事一覧ページにリンク付きカテゴリー一覧を表示してハイライトさせる方法

下記のような感じで、リンク付きの全てのカテゴリーが一覧で表示されて、尚且つハイライトさせたい。個人的にはこの手のカテゴリー一覧ボタンは使用する事がとても多い気がします。ソートのような感じで記事が絞り込めて、ユーザーが見やすいかな？と思うのでよく使っています。カテゴリー一覧だけではなく、「全て」のボタン表示まで入れている情報がなかなか見当たらなかったので、忘れないようにメモに残しておきます。少し強引な手段で対応している部分もあるかもしれませんが、誰かのお役に立てれれば嬉しいです。今回は通常記事投稿の場合と、カスタム投稿の場合をそれぞれ紹介したいと思います。通常記事投稿の場合まず、home.phpやarchive.phpなどの一覧表示ページの表示したい部分に下記を貼り付けます。そして下記CSSを追加。（CSSは必要最低限の部分だけに省略します。）ここまでで、「全て」ボタンがハイライトされ、カテゴリー一覧ボタンが表示されていると思います。続いてcategory.phpを用意して、表示したい箇所に下記を貼り付けます。先ほどとほぼ同じコードですが、このようにcategory.phpの方では「current-cat」のclassを外すだけで、「全て」ボタンについていたアクティブ表示が消えて、対象のカテゴリーのみアクティブになるのでとても簡単な方法ですね。ぜひ試して見てください。カスタム投稿の場合下記のような商品一覧ページという場合を例とします。カスタム投稿の場合でもやり方は一緒です。まず、archive-投稿タイプ名.phpのように、phpファイルを作りFTPでアップします。タクソノミー一覧を表示させたい箇所に下記を貼り付けます。 ※CSSは省略続いて、taxonomy-投稿タイプ名.phpを作成しFTPでアップします。「全て」ボタンの挿入方法が少し強引な気がして個人的にはあまりスッキリできませんが、色々な記事を参考にさせていただきなんとか無事に表示する事ができました。通常記事投稿の場合とカスタム投稿の場合で少し記述が違いますが、それぞれ同じような表現ができます。同じような事でお困りの方がおりましたら、是非試してみてください。
作業メモ
2021.06.24
【たった1行】WordPressのブロックエディターで固定ページのみhtml記述で書く方法

コーディングを行う際に、時々忘れたりしてしまうので、個人的なメモという感じですが、なるべく困っている方へ共有できればと思って、メモを残す事にしました。私はWordPressを導入する際は、一旦htmlでサイトを作ってからWordPressにします。オリジナルテーマを作ってWordPressを構築する際、固定ページにhtmlを張り付けると、変な空のｐタグやbrタグなど勝手に入ったり、コメントアウトしてる部分にも変な改行ができたりするので困ります。なるべくプラグインは使いたくないので、模索してたらとても簡単な方法があったのでメモっておきます。ただこのタグで囲った中に書くだけでＯＫでした。。これでコードエディターとビジュアルエディターを切り替えても、コードが変わることなくいけました。すごい初歩的な事だったっぽいですが、念のためメモに残しておきます。ありがとうございました。