21.WordPressのショートコードのデバッグ方法

サイトの紹介と使い方

< 21.WordPressのショートコードのデバッグ方法 >

概要

  1. ショートコードをテーマ「Cocoon」の「child」テーマのfunctions.phpにコーディングしていますが、バグると自分のWordPressが壊れたかと思うくらい被害を受けることがあります。
  2. バグルのは仕方が無いとして、その被害を少なくしようと思いました。
  3. ところが、functions.phpでは、echo文が使えないのが、最大のネックとなりました。
  4. そこで、echo文の代わりを3つ考えて、2つを実現させました。
  5. 残りの1つは、標準出力を使うことでしたが、筆者の技術力では構想すら浮かびませんでした。
  6. また、他のサイトを見ていて「なるほど」と思ったのは、iframeタグを使用する方法でした。

初めに

  1. function Codeの分類、構成は、筆者が独自に行っています。
  2. ショートコードの中でecho文が使えないので方法を模索しました。
  3. ファイル(置き場所):テーマCocoon childのfunctions.php
  4. 分類コード:21xx

手段1:ブロックエディタのコードブロックを使う

手段2:テキストファイルに書き出す

ソース

  1. 筆者の環境は、さくらインターネットのVPS上でWordpressを稼働させています。
  2. 端末エミュレータのteratermやWinSCPの基礎知識と、少しのUnix系OSの知識が必要になります。
  3. 機能:echoの代わりに、/var/www/html/にショートコードの戻り値などをテキストファイルとして作成します。
  4. 引数:
    1. テキストファイル名
    2. 書き込む文字列
//<--- 2102
function my_debug_shortcode_text( $arg1,$arg2 ){
  $fh = fopen($arg1, "w");
  if( $fh ):
    fwrite( $fh,$arg2 );
    fclose( $fh );
  else:
  endif;
  return "";
}
// 2102 --->

ブロック エディターのコード ブロックにEchoさせる

  1. 未検証です。

コードの細工

  $ret  = "<!-- wp:code -->";
  $ret .= "<pre class=\"wp-block-code\"><code>";
  $ret .= "&lta href=\"";
  $ret .= my_get_homepage();
  $ret .= "/\"&gtMenu&lt/a&gt";
  $ret .= "</code></pre>";
  $ret .= "<!-- /wp:code -->";

次の方法でHTMLを実行しないコードに変換します。
①実HTMLコードの頭に、次の2文を置きます。
$ret = "<!-- wp:code -->";
$ret .= "<pre class=\"wp-block-code\"><code>";
②後ろに次の2文を置きます。
$ret .= "</code></pre>";
$ret .= "<!-- /wp:code -->";
③実HTMLの中の特殊記号をエスケープ文字に置き換えます。
エスケープ文字については後述します。
④この方法で、目視での確認しかできませんが、ショートコードでHTMLが掃き出しやすくなりました。
⑤$ret変数は、筆者が勝手に作ったものです。

エスケープ文字

①記号であっても漢字であっても、コンピュータが理解するためには1文字ごとにコード(数値)が必要になります。
②厳密に言うと違いますが、エスケープ文字は目に見える(表示される)漢字とコード(数値)の中間に位置します。
③エスケープ文字は、エスケープシーケンスやエスケープコードと呼ばれることもあります。
④以下に少しだけ例を載せます。
尚、筆者がショートコードを書く時に、引っかかったのは「<」「>」の2つでした。
もっとあるかもしれません。

エスケープ文字「&lt」と 「<」は、コンピュータにとっては同じものです。
エスケープ文字「&gt」と 「>」は、コンピュータにとっては同じものです。

特殊なエスケープ文字

①「''」「""」で挟まれた間が文字列と認識されます。
②筆者は、「""」だけを使っているので、そのケースを説明します。
③「""」の中に「"」を記述したい場合を考えます。
④普通に「"」を記述すると、文字列の終わりだとPHPに認識されてしまいます。
⑤そこで、エスケープ文字「\"」を使用します。
⑥これで、文字列の終わりだと認識されずに「"」を記述できます。
⑦パソコンやキーボードによっては、「\」(バックスラッシュ)ではなく「¥」記号の時もありますが、両方ともに同じものです。

上手く動かない時

「コードの細工」で頭と後ろに追加した2行づつを消せば、実HTMLは動くはずです。
ところが、筆者は動かないケースに遭遇しました。
対処は次の2つでした。
①エスケープ文字を元に戻しました。
「&lt」を「<」に、「&gt」を「>」に戻しました。
②頭と後ろに次の2行を加えました。
<!-- wp:html -->
<!-- /wp:html -->

お問合せ・御要望

お問合せ
トップへ戻る
タイトルとURLをコピーしました