VS Code用WordPress Post拡張機能を修正してみるその11

Visual Studio Code

2023/03/252023/07/27

修正したWordPress Postの最新版は下記になります。

今回はWordPressに記事を投稿することができるVS Code拡張機能であるWordPRess Post拡張機能の気になる点を修正してみます。画像の多重アップロードは結構困っていたので、解決できて良かったです。自分で機能を増やしたり、動作を修正できるのがオープンソースの良いところと実感できました。

今回はVS Code用のWordPress Post拡張機能のバグ修正について紹介したいと思います。

この拡張機能は、VS CodeでMarkdownを用いて作成した記事を直接WordPressに投稿できるという大変便利なものです。

以前の修正については下記を参照してみてください。

VS Code用WordPress Post拡張機能を修正してみるその10

今回はWordPress Post拡張機能を使っていて気づいた不具合を修正してみます。不具合が発生するかどうかは設定次第なのですが、不具合を分だ場合は画像のリンクが壊れるという大きな影響があるので、直しておいた方が良さそうです。不具合を自分で直せるのがオープンソースの良いところです。

VSIXファイルのダウンロード
発見した不具合
修正
まとめ

VSIXファイルのダウンロード

最初に今回の修正後のファイルの案内をしておきます。

今回の修正でバージョンを「0.0.6-l」となっています。

これを利用してみたい方は下記のURLからVSIXファイルをダウンロードして、VS Codeにインストールしてみてください。

Release v0.0.6-l · scratchpadjp/vscode-wordpress-post

This is unofficial version of WordPress Post extension for VS Code. The following features are added to the original version of WordPress Post 0.0.5. Customize code block behavior Add width/height...

Anker アンカー PowerCore 10000mAh モバイルバッテリー

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

発見した不具合

WordPress Post拡張機能を修正をし始めたときのモチベーションの一つが、imgタグにサイズ属性をつけたいと言うことでした。

この問題に対しては以前に対処しました。

VS Code用WordPress Post拡張機能を修正してみるその2

今回もVS Code用の拡張機能であるWordPress Post拡張機能の修正したことを紹介します。元々のWordPress Post拡張機能は画像の埋め込みに対応しているものの、サイズの指定や縮小には対応していません。今回の修正では画像の最大サイズを指定できるようにしたことで、必要に応じて画像を縮小させることができるようになりました。

このときは

「wordpress-post.image.addSizeAttributes」はHTMLのimgタグにwidth属性とheight属性をつけるかどうかの設定で、デフォルトは「false(つけない)」です。
width属性とheight属性がないとHTMLの表示時にレイアウトがずれることがあるので、この設定はオン「(true)」にするのがオススメです。

という設定項目を追加して、このwordpress-post.image.addSizeAttributesがTrueの時にはimgタグにサイズ属性をつけるように拡張機能のコードを修正しました。

正確に言うと、修正したつもりでした。

しかし、このコードにバグがあり、サイズ属性をつける処理をすり抜けるパスが存在していました。

具体的には

      // generate thumbnail image if needed.
      if ( context.imageResize() ) {
        if ( (orgImgWidth !== displayImgWidth) || (orgImgHeight !== displayImgHeight) ) {
          const thumbnail = サムネイル画像データ;
          ･･･
          (サムネイル画像の最適化処理)
          ･･･
          /* upload thumbnail to wordpress */
          const imgItem = await uploadImage(context, thumbnailSlug, thumbnail);
          srcAttr = context.replaceAttachedImageUrl(imgItem["source_url"]);

          ch(imgs[i]).attr("width", displayImgWidth.toString());    ※1
          ch(imgs[i]).attr("height", displayImgHeight.toString());  ※1
        }
      } else {
        if ( context.imageAddSizeAttributes() ) {
          ch(imgs[i]).attr("width", orgImgWidth.toString());        ※2
          ch(imgs[i]).attr("height", orgImgHeight.toString());      ※2
        }
      }

の部分です。

このコードでは、拡張機能の設定で画像のリサイズが有効である場合(冒頭のif分でTrueの場合)で、かつ、リサイズが必要な場合(2番目のif分でTrue)は、※1の部分でサイズ属性を付与しています。

またこのif分がFalseの場合は、※2の部分でサイズ属性を付与しています。

しかし、2番目のif分がFalseの場合は何も処理をしなくて、この部分の処理をスルーしてしまい、サイズ属性が付与されることがありません。

つまりどうなるかというと「拡張機能の設定で画像のリサイズを有効にしていた場合に、リサイズが不要なサイズの画像に対してはサイズ属性が付かない」という動作になります。

Samsung 256GB microSDXCカード EVO Plus Class10 UHS-I U3 A2 4K R:130MB/s MB-MC256KA

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

修正

原因がわかれば、修正は簡単です。

抜けがないようにコードを修正します。

      // generate thumbnail image if needed.
      if ( context.imageResize() ) {
        if ( (orgImgWidth !== displayImgWidth) || (orgImgHeight !== displayImgHeight) ) {
          const thumbnail = サムネイル画像データ;
          ･･･
          (サムネイル画像の最適化処理)
          ･･･
          /* upload thumbnail to wordpress */
          const imgItem = await uploadImage(context, thumbnailSlug, thumbnail);
          srcAttr = context.replaceAttachedImageUrl(imgItem["source_url"]);
        }
        if ( context.imageAddSizeAttributes() ) {
          ch(imgs[i]).attr("width", displayImgWidth.toString());
          ch(imgs[i]).attr("height", displayImgHeight.toString());
        }
      } else {
        if ( context.imageAddSizeAttributes() ) {
          ch(imgs[i]).attr("width", orgImgWidth.toString());
          ch(imgs[i]).attr("height", orgImgHeight.toString());
        }
      }

これで大丈夫なはずです。

いなコードを見直すと、サイズ属性を付与する部分はif文の外の追い出して一本化すべきような気がしてきました･･･

これで不具合修正完了です。

このサブミットは次になります。