WordPressサイトにコードを簡単に表示する方法

WordPressブログの投稿にコードを表示しますか?通常のテキストのようなコードを追加しようとすると、WordPressはそれを正しく表示しません.


WordPressは、投稿を保存するたびにコンテンツをいくつかのクリーンアップフィルターで実行します。これらのフィルターは、誰かが投稿エディターを介してコードを挿入してWebサイトをハッキングしないようにするためにあります.

この記事では、WordPressサイトにコードを簡単に表示する適切な方法を紹介します。さまざまな方法を紹介し、ニーズに最適な方法を選択できます.

WordPressの投稿にコードを簡単に表示する方法

方法1. WordPressのデフォルトエディターを使用してコードを表示する

この方法は、コードを頻繁に表示する必要がない初心者やユーザーに推奨されます.

コードを表示するブログ投稿またはページを編集するだけです。投稿編集画面で、新しいコードブロックを投稿に追加します.

WordPress投稿にコードブロックを追加する

これで、ブロックのテキスト領域にコードスニペットを入力できます.

ブログ投稿にコードを追加する

その後、ブログの投稿を保存してプレビューし、コードブロックの動作を確認できます.

WordPressに表示されたPHPコード

WordPressテーマによっては、コードブロックがWebサイトで異なる場合があります.

方法2.プラグインを使用してWordPressでコードを表示する

この方法では、WordPressプラグインを使用してブログ投稿にコードを表示します。この方法は、記事にコードを頻繁に表示するユーザーに推奨されます.

デフォルトのコードブロックに比べて、次の利点があります。

  • 任意のプログラミング言語で任意のコードを簡単に表示できます
  • 構文の強調表示と行番号でコードを表示します
  • ユーザーはコードを簡単に調べてコピーできます

まず、SyntaxHighlighter Evolvedプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

アクティベーションが完了すると、コードを表示するブログ投稿を編集できます。投稿編集画面で、「SyntaxHighlighter Code」ブロックを投稿に追加します.

SyntaxHighlighterコードブロック

コードを入力できる投稿エディタに新しいコードブロックが表示されます。コードを追加したら、右側の列からブロック設定を選択する必要があります.

SyntaxHighlighterコードブロックの設定

まず、コードの言語を選択する必要があります。その後、行番号をオフにし、最初の行番号を提供し、必要な行を強調表示し、機能をオフにしてリンクをクリック可能にすることができます.

完了したら、投稿を保存し、プレビューボタンをクリックして実際の動作を確認します.

構文強調表示で表示されるコード

プラグインには、多くの配色とテーマが付属しています。色のテーマを変更するには、次の場所にアクセスする必要があります 設定»SyntaxHighlighter ページ.

SyntaxHighlighter設定

設定ページから、カラーテーマを選択し、SyntaxHighlighter設定を変更できます。設定を保存して、ページの下部にあるコードブロックのプレビューを表示できます.

コードブロックのプレビュー

クラシックエディターでSyntaxHighlighterを使用する

古いクラシックWordPressエディターをまだ使用している場合は、SyntaxHighlighterプラグインを使用してWordPressブログ投稿にコードを追加する方法を次に示します.

言語名でコードを角かっこで囲みます。たとえば、PHPコードを追加する場合は、次のように追加します。

[php]
<?php
プライベート関数get_time_tags(){
$ time = get_the_time( ‘d M、Y’);
$ timeを返します。
}
?>
[/ php]

同様に、HTMLコードを追加したい場合は、次のようにHTMLショートコードで囲みます。

[html]
サンプルリンク
[/ html]

方法3. WordPressでコードを手動で表示する(プラグインまたはブロックなし)

この方法はより多くの作業を必要とし、常に意図したとおりに機能するとは限らないため、上級ユーザー向けです。.

それはまだ古いクラシックエディターを使用していて、プラグインを使用せずにコードを表示したいユーザーに適しています.

まず、コードをオンラインのHTMLエンティティエンコーダーツールに渡す必要があります。コードマークアップをHTMLエンティティに変更します。これにより、コードを追加してWordPressクリーンアップフィルターをバイパスできます。.

コードをコピーしてテキストエディターに貼り付け、ラップしてタグを付けます.

クラシックエディターでコードを手動で追加する

コードは次のようになります。

これはサンプルリンクです

投稿を保存して、実際のコードをプレビューできます。ブラウザはHTMLエンティティを変換し、ユーザーは正しいコードを表示およびコピーできます.

WordPressでコードを手動で表示する

この記事が、WordPressサイトにコードを簡単に表示する方法を理解するのに役立つことを願っています。また、最も望まれるWordPressのヒント、トリック、およびハックの究極のリストもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me