Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressのブログ投稿にコードを表示したいですか?

通常のテキストのようにコードを追加しようとすると、WordPressはそれを正しく表示しません。WordPressは、投稿を保存するたびにいくつかのクリーンアップフィルターを通してコンテンツを実行します。これらのフィルターは、誰かが投稿エディター経由でコードを注入してサイトをハッキングしないようにするためにあります。

この投稿では、WordPressサイトにコードを簡単に表示するための適切な方法を紹介します。さまざまな方法を紹介するので、自分のニーズに合ったものを選んでほしい。

How to easily display code in WordPress posts

なぜWordPressサイトにコードを表示するのか?

技術的なトピックについてブログ投稿をしたり、製品のドキュメンテーションを作成したりする場合、コード・スニペットの表示は本当に便利です。ユーザーはコードをコピーしてサイトに追加するだけでいい。

しかし、WordPressサイトにコードを表示するのはそれほど簡単ではない。

WordPressはスニペットを機能的なコードとして解釈し、テキストとして表示する代わりにサイトに実装しようとします。また、コードが正確に表示されないため、ユーザーがサイトに入力する際にエラーとなります。

その上、WordPressはセキュリティ対策として複数のフィルターを使用しています。ハッカーがコンテンツエディターに悪意のあるコードを注入し、サイトをハッキングするのを防ぐために、コンテンツにフィルターをかけます。

とはいえ、WordPressでコードを表示する方法はさまざまです。以下のリンクをクリックして、お好みのセクションに進んでください:

方法1.WordPressの初期設定エディターを使ってコードを表示する。

この方法は、初心者やコードを頻繁に表示する必要のないユーザーにお勧めする。

コードを表示したいブログ投稿またはページを編集するだけです。WordPressのコンテンツエディター画面で、投稿に新しいコードブロックを追加します。

Add code block to your WordPress posts

これで、ブロックのテキストエリアにコード・スニペットを入力できる。

コードブロックには、コードのプレビューが表示されます。

Add code to your blog post

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

コードの外観に満足したら、ブログ投稿を公開してください。

PHP code displayed in WordPress

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

方法2.プラグインを使ってWordPressにコードを表示する。

この方法では、WordPressプラグインを使ってブログ投稿にコードを表示する。この方法は、投稿にコードを表示することが多いユーザーにおすすめです。

初期設定のコードブロックに比べて以下のような利点がある:

  • あらゆるプログラミング言語のコードを簡単に表示することができる。
  • シンタックスハイライトと行番号でコードを表示する。
  • ユーザーは簡単にコードを調べ、コピーすることができる。

まず、SyntaxHighlighter Evolvedプラグインをインストールして有効化してください。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化したら、コードを表示したいブログ投稿を編集してください。投稿編集画面で、’SyntaxHighlighter Code’ ブロックを投稿に追加してください。

SyntaxHighlighter code block

投稿エディターに新しいコードブロックが表示され、コードを入力することができます。

コードを追加したら、右のカラムからブロック設定を選択する必要があります。

Change Syntax Highlighter code settings

まず、PHP、CSS、Javaなど、コードの言語を選択する必要がある。その後、行番号をオフにしたり、最初の行番号をプロバイダーに指定したり、好きな行をハイライトしたり、リンクをクリック可能にする機能をオフにしたりすることができる。

投稿が完了したら、投稿を保存し、プレビューボタンをクリックして投稿を確認してください。

Code displayed with syntax highlighting

このプラグインには多くの配色とテーマが用意されている。

カラーテーマを変更するには、設定 ” SyntaxHighlighterページにアクセスする必要があります。

SyntaxHighlighter settings

設定ページから、カラーテーマを選択し、SyntaxHighlighterの設定を変更することができます。

設定を保存すると、ページ下部にコードブロックのプレビューが表示されます。

Code block preview

クラシックエディターでSyntaxHighlighterを使う

もしあなたがまだ古いクラシックなWordPressエディターを使っているのであれば、SyntaxHighlighterプラグインを使ってWordPressブログ投稿にコードを追加する方法を紹介しましょう。

コードを角括弧で囲み、言語名を記述します。例えば、PHPのコードを追加する場合は、次のように記述します:

<?php
private function get_time_tags() {
        $time = get_the_time('d M, Y');
        return $time;
    }
?>

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

<a href="example.com">A sample link</a>

方法3.WordPressのコードを手動で表示する(プラグインやブロックは使わない)

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

古いクラシックエディターをまだ使っていて、プラグインを使わずにコードを表示したいユーザーに適している。

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

コードをコピー&ペーストしてテキストエディターに貼り付け、<pre >タグと<code>タグで囲む。

Adding code manually in classic editor

コードは次のようになる:

<pre><code>
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;これはサンプルリンクです&lt;/a&gt;&lt;/p&gt;
</pre></code>

投稿を保存し、コードをプレビューすることができます。

ブラウザーはHTMLエンティティを変換し、ユーザーは正しいコードを見たりコピーしたりできるようになる。

Manually displaying code in WordPress

この投稿が、WordPressサイトにコードを簡単に表示する方法を学ぶのにお役に立てば幸いです。また、WordPressのヒント、トリック、ハックブログのトラフィックを増やす方法をまとめた究極のリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

34件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    I think the plugin is great for its job, but…

    one feature I’d love to see added is a copy button.

    Currently, users have to manually highlight and copy the full code block, which can be tedious, especially for longer snippets.
    A single-click copy option would tremendously improve the user experience.
    That way, readers could easily grab the code without accidentally missing any part of it when they highlight the code.

  3. Jiří Vaněk says

    Is there a possibility to have a copy code button in the plugin so that the user does not have to copy the code to the clipboard manually?

      • Jiří Vaněk says

        Thank you for answer. This is a great shame, because it makes a lot of work easier. Sometimes it happens that even line numbers are copied into the code using the manual method. Elementor has a widget for the code that the copy button has and it’s great. I will follow the update of the article if necessary.

  4. Ravish says

    Hi, first of all, Thanks for this blog.

    I want to add codes for any problem in different languages (e.g. Python and C++). How can we do that?

  5. Nimesh says

    This is great.
    If it wasn’t for this, I would’ve used a separate plugin for input code snippets.
    I’m still using WordPress’s classic editor and will add the code snippets to my posts as mentioned in this.
    Thank You for this amazing share!

  6. Induwara says

    Thanks,
    This article is very useful. I installed the plugin and it works well. There’s a problem with my theme that when I put a code from the block editor the theme displays it with the background color so it’s impossible to see the code. I’m a big fan of WpBegginer!

    • WPBeginner Support says

      Glad our guide was helpful, you should be able to reach out to your theme for assistance with that issue.

      管理者

    • WPBeginner Support says

      You could place the code as we have in this article and note beneath it where it came from Github. There may be plugin options as well for embedding the code directly

      管理者

    • WPBeginner Support says

      It is not required but for sites that wish to show code to their users, these are some methods they can use.

      管理者

  7. Christian says

    There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on WordPress plugin search! ;-)

    Synatx Highlighter Evolved plugin

  8. Dave Mackey says

    I think there is a problem with Syntax Highlighter Evolved in latest versions of WordPress. I, and others, are having it incorrectly display html entities. See support forums for more.

  9. John D says

    Personally, I use WP-GeSHi-Highlight, which uses the standard GeSHi codes. I think I used a predecessor of the plugin featured here, but I had difficulty finding the language codes.

    • Thomas A. Reinert says

      I do absolutely agree. They´re pretty well formatted and syntax-highlighted, they´re forkable and they´re versionable too. So WP GIST is the way to go for me at least..

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。