wordpress

正直少しうれしい気持ちもある。 スパムコメントを貰ってうれしいだなんてどうかしてるぜ、って思うかもしれないけど、だれにも見られないよりはよっぽどましである、なんて思ってしまうのである。 がしかし、通知メールがたくさん来るのは許しがたいということで、reCAPTCHAを導入することにした。 その前に、実際のスパムコメントはこんな感じという風にお披露目しよう。 スパムコメントに荒らされたブログ記事 該当する記事がこちら↓ 拝啓「葉桜の季節に君を想うということ」を読んでない人に告ぐ。この本はどんでん返しがある。 うーん、どういう理由でコメントしているのだろうか。 なんらかのスパムに違いないのだが、Good Siteと言われるとやっぱり少しうれしい、が排除していく。 reCAPTHA設定方法 ログイン＆登録 まずはreCAPTCHAにログインをして、サイトを登録する。 さほど難しい手順じゃないので省略。 ちなみにreCAPTHAのサイトはこちら↓ reCAPTHA プラグインで実装 次にプラグインを使用する。 プラグインを使うのは制作者の恥だなんて思っている時期があったが、車輪の再開発する方がよっぽどダサいことに気が付いた。 とはいえ、兼ね合いもあるのでほどほどに。 今回はインストール数の多い「Invisible reCaptcha for WordPress」を使用することにした。 Invisible reCaptcha 設定を開き、「サイトキー」「シークレットキー」を入力。 保存をクリックした後、wordpressタブに移り、保護したい箇所をクリックする。 更新して右下にreCAPTHAアイコンが表示されていれば問題ない。 少し寂しいがこれでスパムコメントとおさらばすることができた、と思われる。 もし以降もスパムコメントが来るのであれば、報告、更新する。

本記事はリード文をカスタムフィールドで書いている。 が、カスタムフィールドないでいくら改行しても改行が記事に反映されないので、調査、修正してみた。 まず、そもそものコードは <?php $item_lead = get_post_meta($post->ID, 'item_lead', true); echo $item_lead; ?> という形で吐き出していた。 が、これだとcssは当たるが、改行が反映されない。 どうやらこれは調べてみると仕様っぽい。 コードによる解決方法が見つからなかったので、すこし無理やりだが、改行を判定し、pタグで囲むようにした。 実際のコードは、 $values = explode("\n", get_post_meta($post->ID, 'item_lead', true)); foreach ($values as $value) { echo "<p>" . $value . "</p>\n"; } ?> という形に修正した。 やっとこととしては、まずexplode()で取得した文字列を改行コードで分割する。 分割した値を回し、pタグで囲っていく。 ただそれだけ。 少し無理やりかもしれないが、改行が反映されるようになった。

コメント投稿機能が表示されない ブロガー朝のルーティン 朝起きてから自身の予約投稿した投稿が、無事に公開されているか確認する。 そんなブロガーであり、目覚めの悪い私が驚き飛び起きたのには訳がある。 コメント投稿欄が非公開になっていたからである。 11月、機能追加したコメント投稿機能がうまく動作していなかったのかしら、と他ページを見てみたところ、どうやら問題なく表示されている。 どうしてこのページだけ、投稿機能が動作しないのか。 長いバグ修正の旅に 長い長い、そして結論はいたってシンプルであったバグ修正の旅に出る。 まずは同じ現象が起きているページを探してみる。 結果、2ページが該当した。 該当したのは下記ページ（現在は正常に動作中なので、コメントください）。 アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した nove月次報告書（2021年11月）-初月の収益を公開- この２つにはいくつかの共通点があった。 ひとつは、カテゴリが「メディア」であるということ。 ひとつは、今月機能追加で採用したショートコード管理プラグインが動作しているということ。 そこでふたつの共通点を順に調査していくことに。 カテゴリが関係しているのか まず、カテゴリについて実験してみる。 他の記事をメディアカテゴリに移管する→投稿機能は無事に動作している。 該当記事を他のカテゴリに移管する→投稿機能は変わらず表示されない。 つまり、カテゴリは今回のバグに関係ない。 プラグインが関係しているのか 次にショートコード管理プラグインを疑ってみる。 この時点で私は相当このプラグインを疑っていた。 だからプラグインなんて採用するものじゃない、なんて悪態すらついていた。 そんな心境でデバックを開始する。 まずはプラグインを無効にしてみる→該当ページの投稿機能は変わらず表示されない。 他の記事に上記プラグインを使用してショートコードを挿入する→投稿機能は無事に動作している。 該当ページにあるショートコードの記述を削除してみる→投稿機能は変わらず表示されない。 つまり、プラグインは問題ない。 そもそも評価4.1かつ多くの人が使用しているプラグインを疑うくらいなら自身の作成したテーマを疑うべきである。 というわけで、自作テーマを見返したが、どうにも原因となる部分は見つからない。 解決編 そこでいろいろ調べていると、 ダッシュボード > 投稿 と移動し、 該当する投稿の「クイック編集」で「コメントを許可」にチェックを入れてみてください。 という記述を見つけた。 まさか、と思い上記手順で確認してみたところ、どうしてか知らないが、チェックが外れている。 唖然としつつ、チェックをいれ、再度ページを見ると、無事にコメント機能が動いていた。 また、つまらぬことに時間を割いてしまった、なんて内心解決にほっとしている気持ちを隠しつつ、ハードボイルドに言ってみたりする。 共通点ある、なんてどっかの私立探偵のみたいなセリフは何も生み出さなかった。

クラシックエディタのリンク挿入ボタンがうまく機能していない 公開から少し経ち、ブログを投稿する機会が増えるにつれ、気が付き始めたことがある。 クラシックエディタのリンク挿入機能がうまく機能していないという点が、その１つ。 調べてみるとクラシックエディタがうまく機能しなくなるバグはよくあることらしい。 プラグインが原因？ 調査結果によると多くはプラグインを起因とするものらしく、特定のプラグインを無効化すれば直ったという声をよく見た。 しかし、こういう事態に備えて、プラグインを最小限に抑えている。 とは言え入れていないわけではないので、ひとつひとつ無効化してテストしてみた。 Classic Editor 無効化したが効果が見られず。 というより、そもそもこのプラグインを無効化したら意味がない。 Highlighting Code Block エンジニアの味方。 ブログでコードを簡単に見せることができるプラグイン。 無効化したが効果が見られず。 XML Sitemaps 動的にサイトマップを作成してくれるプラグイン。 無効化したが効果が見られず。 結果、原因はプラグインではない。 functions.phpにいけない記述があるのかしら。 ということで、functions.phpをまるっと削除してみたところ、正常に稼働した。 細分化してエラーの原因を探すと、どうやらビジュアルエディターにcssを当てる記述が悪さをしているとのこと。 書かれたソースがこちら。 // 投稿ページにスタイルを充てる function wpdocs_theme_add_editor_styles() { add_editor_style('パス'); } add_action('admin_init', 'wpdocs_theme_add_editor_styles'); もしやエディタを読み込む関数が非推奨になったのかしらなんて思い、 add_editor_style('パス'); シンプルに記述方法を変えてみたが、変わらず正常に稼働しない。 ついに、原因解明 まさかと思いつつ、ということで読み込んでいるcssの内容をまるっと削除すると、正常に稼働。 そこでトライ＆エラーと消しては確認を繰り返すとついに発見。 原因はaタグに指定された「display: contents ;」…! 確かシンプルにリンクにアイコンをつけたくて記述した箇所だが、現状はもう使用してない不要な箇所。 自身が使うエディタのみだから削除を忘れていた。 そして原因はまさかのCSSだった。 無駄な記述は自身の首を絞める 今回の教訓として心に刻むことにした。 せっかくなので、 display: contents ; 理解を深める 表示のスタイルとエディターのスタイルを一元管理する 上記２つを課題として自らに課すことにした。

ブログ更新ってめんどくさい ブログ更新は面倒くさい。 そんなこと分かり切っている。 なかでも面倒なことの1つにアイキャッチ画像の選定がある。 面倒なことを楽にできるのがエンジニアの特権だ。 ということでアイキャッチ画像を簡単に作れるようにした。 作成されるアイキャッチ画像 本ツールを作成できるアイキャッチ画像はこんな感じ。 「本ツールを作成できるアイキャッチ画像」の部分を簡単に変更できる。 作成するうえでの考え方 JavaScriptのCanvasに背景画像を描画する その上にCanvas で文字を書く 作成したコード <div id="creatEyeCatch"> <div class="input"> <input type="text" id="input" placeholder="記事タイトルを記入する"> </div> <canvas class="canvas" id="canvas--background" width="788px" height="486px"></canvas> <div class="operation"> <button id="deleteTitle">タイトルを削除</button> </div> </div> <script> // var const deleteTitle = document.getElementById('deleteTitle') // 背景CANVASの作成 const canvasGround = document.getElementById('canvas--background') const ctxGround = canvasGround.getContext('2d') const nove = new Image(); nove.src = '画像のパス'; ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height); // 入力されたタイトルを描画する関数 const drawFont = (el) => { ctxGround....