テーマのアップデートで既存バグ発見

前回このサイトのテーマのバージョンアップを行いました。

WordPress テーマのアップデート

バージョンアップする前に、テストは行いましたが、今回のバージョンアップとは、関係ないとことでバグを発見^^;

なぜそれが解ったかと言いますと！
バージョンアップしたので、lightbox2が、動くようになっているはずなので、
画像をクリックしてみると！

あれ！？

おかしいぞ！？

早々、HTMLを見てみると！

• ポップアップ用のaタグがおかしい^^;
• aタグの画像ファイルのファイル名もおかしい^^;
  • ん！拡張子が「svg」！

そうかぁ～。このサイトだけ！次世代のフォーマットに対応したのたっだ^^;
（画像の次世代フォーマットについては、下記にて、Youtubeにて配信しております！）
【初心者向け】|WordPressの使い方|プラグイン|初心者|使い方|ブログ|ホームページ|ワードプレス|プラグイン|おすすめ|必要|ウェブサイト|WEBサイト制作|始めの設定|RTBSoftLab

こんなところに、影響があったとは^^;

バグなので、直しておかないといけませんね^^;

目標は！

1. 現在、たしか、ポップアップは、自動(jQuery)でaタグを挿入しているはず！
2. その部分を変更して、次世代フォーマットは、無視するようにする。
   1. aタグのみ！

たぶん、こんな感じで直るでしょう！

さて、やってみます！

サーバーのWordpressのバックアップ

まず、大事なのが、バックアップですね！

これがあると、万が一の場合も簡単に元に戻せます♪

さらに、このバックアップファイルを使って、ローカルのブログサイトを最新の状態にすることが出来ます。

バックアップは、Youtubuにアップした「CPI WP Migiration」を使用します。

Youtubeは、下記から見ることが出来ます。

【初心者向け】2020年 ブログ・アフィリエイトサイトの作り方。「WordPress編」必ず作れるます！（WordPress設定編）

詳しくTag情報を調べて！

まず、imgタグの情報を把握します。
ouertHTMLに以下になっていますね！

<img class=\"wp-image-xxx native-lazyload-js-fallback\" alt=\"\" src=\"http://localhost/soft/wp-content/plugins/native-lazyload/assets/images/placeholder.svg\" data-sizes=\"(max-width: 776px) 100vw, 776px\" data-srcset=\"http://localhost/soft/wp-content/uploads/xxx/xxx/xxx.png 776w, http://localhost/soft/wp-content/uploads/xxx/xxx/xxx-300x286.png 300w, http://localhost/soft/wp-content/uploads/xxx/xxx/xxx-768x733.png 768w\" data-src=\"http://localhost/soft/wp-content/uploads/xxx/xx/xxx.png\" loading=\"lazy\">

ということは！JavaScliptで、下記を抽出し、それをaタグとして使用すれば問題ないはずです
data-src=\”http://localhost/soft/wp-content/uploads/xxx/xx/xxx.png\”

でも^^;正規表現ですか！？

正規表現は、超～苦手です^^;仕方ないのかなぁ～www^^;

文字列の正規表現の抜出

諦めて、正規表現で上記の部分を抜き出しすることを目指します。

一発で、抜出するのは、私には難しすぎるので！
２段階に分けて抜き出せばOKかと考えます！
１段階目は、「data-src=」を含めた文字列を抽出！

正規表現をチェックしてくれるサイトは、今は、この２つよく使用しています。
（リアルタイムで、抽出場所に色を付けてくれるチェカーです）

• http://refiddle.com/
  • こちらをよく使います。
• https://www.debuggex.com/
  • こちらは、視覚的に教えてくれます。

さて、がんばってみるか！

おっ！

一発で抜出に成功♪（意味が解っていませんがwww^^;）

/data-src=[^\s]*."/g

この際だから、少し勉強してみます。（あくまで私的な理解になります）
利用したサイトは、こちらになります。

• data-src=
  • 上記の文字で始まる。
• [^\s]
  • \s
    • スペース、タブ、改ページ、改行を含むホワイトスペース文字にマッチ
  • ^
    • 上記の否定（反転）
  • []で、文字の集合体
• *.”
  • *が0 回以上の繰り返し
  • .が1 文字にもマッチ
  • 文字はダブルコーテーション
  • 上記で！
    • いづれかの文字が続いて、ダブルコーテイションで終わるまで！

なるほど～って、思いました(笑)

でも、なんでそうなると！
httpのダブルコーテーションにならないのか不明^^;
まっ！いいか！（チェッカーを信じる私です(笑)）

これで、正規表現の勉強は、おしまいです(笑)

JavaScliptの修正＆テスト

さて、これでJsは修正出来るので、Eclipsでコーディング！

そして、テスト！

あれ？私って、バカ！？

よく考えると、jQueryのattrで、属性の「data-src」は簡単に抽出できるではないかwww^^;
（バカですね～(笑)）

ということで、正規表現は、止めて、無事テスト完了♪

ハマった所

柔軟な考えがないと、難しい考え方に入ってしまいますね^^;
勿論、正規表現でハマっていますよ(笑)
正規表現は、今度、きちんと勉強します。（たぶん）

参考サイト

• http://refiddle.com/
• https://www.debuggex.com/
• 正規表現

ありがとうございました♪

残っている懸案

分類	懸案	結論	完了
java	throws ServletException, IOException

今回のまとめ

今回のまとめは！

• WordPressのプラグインは、どこまで対応しているか解らないので、怖いですね～^^;
• やはり、プラグインより、私はコード派だと思います。