WordPressコードブロックの使用方法

WordPressのページや投稿にコードを表示するのは難しい場合があります。 コンテンツ内にコードを投稿するだけで、特にWordPressでコードが正しく表示されなかったり、セキュリティによって悪意のあるアクティビティがロックされたりした場合に、興味深い結果が得られる可能性があります。 幸い、WordPressコードブロックを使用すると、コードスニペットを簡単に表示できます。 このブロックの使用方法を知っていると、Webサイトと読者の両方にとって最良の方法でコンテンツ内にコードを表示するのに役立ちます。

この記事では、WordPressコードブロックを見て、それが何をするのかを見ていきます。 投稿やページに追加する方法と、その設定とオプションを確認します。 最後までぶらぶらして、使い方のヒントとベストプラクティスを確認し、よくある質問を確認してください。

私たちのYoutubeチャンネルを購読する

投稿またはページにコードブロックを追加する方法

コードブロックをページと投稿に追加するには、ブロックを配置するコンテンツ領域の横にあるブロック挿入ツールを選択するか、ページの左上隅にある挿入ツールを選択します。 ブロックの名前を入力し、表示されたらそれを選択するか、ブロックをスクロールしてそこにあるものを確認します。

必要に応じて、ブロックを表示する領域に/ codeと入力できます。 次に、Enterキーを押すか、表示されるオプションからブロックを選択します。

これで、コンテンツ内にコードブロックができ、表示したい任意のタイプのコードを追加できます。 コードは自動的にコードタグでマークされるため、コードとして正しく表示されます。 これは、読者が自分のプロジェクトから学び、自分のプロジェクトで使用するための例を提供するのに役立ちます。 この例では、WordPressサポートページの疑似コードを使用しています（なぜなら）lazy.level = advancedです。

コードブロックの設定とオプション

コードブロックには、設定とオプションを見つけることができる2つの場所があります。 1つ目は、ブロックの上にあるコードツールバーです。 2つ目は、右側のサイドバーのオプションです。 両方を見ていきます。

コードブロックツールバー

ブロック内の任意の場所をクリックして、ツールバーを表示します。 すべてのツールが表示されない場合は、新しいブロックの場所にあるブロックの下にマウスを置き、ブロックをクリックします。 すべての設定が表示されます。

コードブロックタイプまたはスタイルの変更

最初の設定では、左矢印と右矢印を使用します。 これにより、ブロックがカスタムHTMLブロック、フォーマット済みブロックに変更され、列が変更され、グループを作成して、背景色の調整、境界線の選択、およびその他のオプションの調整を行うことができます。 それらにカーソルを合わせると、それぞれがどのように見えるかをプレビューできます。 カスタムHTMLオプションにカーソルを合わせています。

引っ張る

ドラッグツールには6つのドットが含まれています。 これらのドットをつかんで、ブロックを好きな場所にドラッグします。 さまざまな領域にカーソルを合わせると、考えられるすべての場所に配置される青い線が表示されます。

ドロップすると、ブロックは新しい場所に配置されます。

動く

上下の移動矢印は、クリックするたびにコンテンツブロック内の1ブロック上または下にブロックを移動します。

太字と斜体

太字と斜体の設定は、強調表示したコードに適用されます。 一緒に使用することも、個別に使用することもできます。 この例では、一緒に使用することも、独立して使用することもあります。 これは、コード内の特定の行またはコマンドに注意を引くための良い方法です。

リンク

このリンクを使用すると、任意のコードをクリック可能なリンクにすることができます。 強調表示したコードの部分のURLを検索または入力できます。 これは、各コマンドのチュートリアル、他の例、コードの出所などにリンクする場合に適しています。同じタブまたは新しいタブでリンクを開くことができます。

その他の設定

コードブロックの[その他の設定]は、いくつかのオプションを含むドロップダウンボックスを開きます。 この例では、各オプションを適用しました。

インラインコード–コードとしてフォーマットされたテキストを表示します。 テキストを単独で1行に配置します。 すべてがコードとしてフォーマットされているため、フォントは同じように見えます。

インライン画像–マウスを置いたテキスト内に画像を配置します。 画像を選択できるメディアライブラリが開きます。 画像をクリックすると、幅を変更できるドロップダウンボックスが表示されます。

キーボード入力–選択したコードにキーボードタグを追加します。 コードは、ブラウザのデフォルトの等幅フォントで表示されます。

取り消し線–強調表示したコードに線を追加します。

下付き文字–コードを下付き文字としてフォーマットします。

上付き文字–コードを上付き文字としてフォーマットします。 下付き文字と上付き文字を一緒に使用できます。 これにより、フォントのサイズが小さくなり、コードが水平方向に中央揃えになります。

テキストの色–強調表示したコードの色を変更します。 既成の色から選択するか、カラーピッカーツールで色を選択するか、HEX、RBG、またはHSLとして値を入力します。

オプション

コードブロックオプションは、ツールバーの右端にある3つのドット内に配置されます。 オプションは次のとおりです。

[その他の設定を非表示] –右側のサイドバーを非表示にして、すっきりとした広いワークスペースにします。

コピー–ブロックをコピーして、コンテンツ領域内の任意の場所に貼り付けることができます。

複製–ブロックを複製し、元のブロックの下に配置します。

前に挿入–コードブロックの上にコンテンツ領域を追加します。

後に挿入–コードブロックの下にコンテンツ領域を追加します。

移動先–矢印キーで上下に移動できる青い線を配置して、ブロックを移動できます。 目的の場所に行が表示されたら、Enterキーを押します。

HTMLとして編集–コードをHTMLとして編集できるブロックのコードエディターに変更します。 ブロックを視覚モードに戻すには、[視覚的に編集]を選択します。

再利用可能なブロックに追加–ブロックを再利用可能なブロックに追加して、任意のページまたは投稿で再利用できるようにします。

グループ–ブロックをグループに追加して、単一のユニットとしてブロックに変更を加えることができるようにします。

ブロックの削除–コードブロックを削除します。

コードブロック設定

コードブロックの設定は、右側のサイドバーに配置されます。 タイポグラフィと詳細設定が含まれます。 ブロックを選択すると、設定が表示されます。 サイドバーが表示されていない場合は、右上隅にある歯車のアイコンをクリックします。

タイポグラフィ

タイポグラフィでは、ブロック全体のフォントのサイズを選択できます。 7つのサイズのドロップダウンボックスからフォントサイズを選択するか、フィールドにカスタムサイズを入力します。 [リセット]をクリックして、デフォルトのフォントサイズに戻します。

高度

詳細設定には、HTMLアンカーと追加のCSSクラスのフィールドが含まれます。 アンカーはこのブロック専用のURLなので、直接リンクできます。 [追加のCSSクラス]フィールドでは、カスタムCSSクラスを追加してブロックのスタイルを設定できます。

コードブロックを効果的に使用するためのヒントとベストプラクティス

コンテンツ内にコードを表示するときはいつでも、このブロックを使用してください。 コード自体はブロックに影響を与えません。

テキストエディタでコードを作成するときと同じように、スペースを使用してコードをフォーマットします。 太字と斜体の設定を使用して、コード内の特定のスニペットに注意を向けます。

他のコードと同様に、わかりやすいようにラベルを付けてください。 コードにコメントを付けたり、ブロック内にメモを追加したりできますが、誰かがコードをコピーしたい場合に備えて、コード要素内にないことを確認してください。

コードブロックに関するよくある質問

WordPressコードブロックの目的は何ですか？

他の人が見て使用できるようにコードを表示するため。 それはあなたの間隔を保つきれいなレイアウトでコードを表示します。

コードブロックはコードを実行しますか？

いいえ。フォーマットされたコードが表示されるので、読者はそれを見て使用できます。 コードは、HTMLコードタグで自動的にラップされます。

どのような種類のコードを表示できますか？

プログラミング言語またはスクリプト言語のコードが表示されます。 言語は何の違いもありません。

コードをフォーマットしますか？

いいえ。コードエディタとしては機能しないため、間隔、色、数字の追加などは変更されません。入力したとおりにコードが表示されるだけです。

コードブロックはHTMLブロックとどう違うのですか？

HTMLブロックを使用すると、ページのコードエディタビューに変更することなくHTMLを作成できます。 フロントエンドでHTMLを実行します。 バックエンドから結果をプレビューできます。 実行したくない場合は、コードブロックを使用してHTMLを表示できます。

事前にフォーマットされたブロックとどう違うのですか？

Preformatted Blockは、スペースを含むテキストを等幅フォントで表示します。 サイドバーオプションのフォントと背景色を追加します。

結論

これがWordPressコードブロックの見方です。 ブロックはシンプルで使いやすいです。 コードを実行しないため、言語自体は重要ではありません。 このブロックは、読者がコピーまたは学習するためのあらゆるタイプのコードを表示するための優れた方法を提供します。

我々はあなたから聞きたい。 WordPressコードブロックを使用しましたか？ コメントであなたがそれについてどう思うか教えてください。

Danielala /shutterstock.com経由の注目の画像