WPブロックその6-コード-

この記事について

WordPressのブロックをコードエディターを使い、HTML視点で見てみる。

内容は以下。

• 該当ブロック画像
• ブロックのコード
• HTMLコードの意味
• 使い方
• 補足等その他

これら内容は以下レンタルサーバーでのWordPress環境を使用。

シン・レンタルサーバー

各事項については以降に書いていく。

その他、環境整備に関する新情報。

同系列WordPress特化型レンタルサーバー

WordPress専用クラウド型レンタルサーバー『wpX Speed』

同系列安定型レンタルサーバー

格安ドメイン名取得サービス『Xserverドメイン』

その他キャンペーン中WordPress対応レンタルサーバー

ロリポップ公式サイト

ドメイン管理に関しては

格安ドメイン名取得サービス『Xserverドメイン』 MuuMuu Domain! お名前.com

WPブロックその6-コード-

該当ブロック画像

ブロックのコード

<!-- wp:code -->
<pre class="wp-block-code"><code>■ビジュアルエディタ時のテキスト入力エリア■</code></pre>
<!-- /wp:code -->

HTMLコードの意味

<!– wp:code –>と<!– /wp:code –>

<!– wp:code –>と<!– /wp:code –>は、その間がコードブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。

またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。

<pre>と</pre>

通称preタグ

<pre>と</pre>は、その間の文章群をブラウザの解釈による変更加えず、そのままの形でテキストとして出力するようコンピューターに伝える為に使われる。

「!、&、<、>,”,@」などHTML上で特殊文字と呼ばれる文字はそのまま出力できず、文字は特定文字列(&の後ろに文字名、その後;で締める)に置き換える、通称マークアップ文字にする事で出力可能。

下はマークアップ文字の例

• <は&lt;
• >は&gt;
• “は&quot;
•  (改行無し空白)は&nbsp:
• @は&copy;
• &は&amp;

通称codeタグ

<code>と</code>は、その間の文字列がソースコードである事をコンピューターに伝える為に使われる。これがコードブロックの主要部と思われる。

preタグと併用する事で、タグによる整形が不要となり扱いやすくなる。

使い方

• ソースコードの表示

単純にソースコードを表示したい時に使えば良い。

補足等その他

• 特殊文字
• preタグにclass=”wp-block-code”が入る

まとめ

停止脳ニート的にソースコードを貼る場合はこれを使っておけばよさそう。

よろしく