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で検索キーワードを強調表示する方法

WordPressの検索をさらにユーザーフレンドリーにする試みとして、検索結果で検索キーワードをハイライトすることができます。私たちはこれをあるユーザーのために行ったので、他のユーザーにも役立つとフィードバックした。この投稿では、WordPressの検索結果で検索キーワードをハイライトする方法を紹介します。

Highlighting search terms in WordPress search results

まずsearch.phpを開き、以下のコードを探してください:

<?php the_title(); ?>

上記のコードを次のように置き換えてください:

[cbk2]

本当に〜してもよいですか?

[cbk3]

CSSファイルを開き、search-excerptクラスのスタイルを追加すると、キーワードがハイライトされます。現在、このコードは検索キーワードを太字にしています。テーマのスタイルシートでこの簡単なCSSを試すことができる。

[cbk4]

ソースマイケル・マーティン

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

アバター

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

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

  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. Imme says

    Hej, thank you very much for this very helpful piece of code. Is there a way to exclude links? The code as is breaks many of the “more”-links on my site.

  3. Vernon Fowler says

    Any chance you can update this neat tutorial for modern themes such as Twenty Seventeen where instead of title() in the loop, the loop goes through:

     get_template_part( 'template-parts/post/content', 'excerpt' );

    I’m comfortable with replacing

    <strong class="search-excerpt">\0</strong>

    with HTML5

    <mark>\0</mark>

    and the relevant CSS.

    Or will we need a different approach in themes using get_template_part ?

    • WPBeginner Support says

      Hey Vernon,

      Thanks for the suggestion. We will try to update the article with more detailed instructions.

      Meanwhile, you will need to edit the /template-parts/content-search.php template. If your theme does not have it, then you can create it and then reference it in your search.php template.

      管理者

      • Vernon Fowler says

        That’s working. Thank you.

        Can we do the same for the_content as for the the_title or do we need a different approach?

  4. Steph says

    There is no “” in my search.php file..
    —————————–
    Mine looks like this:

    “”

  5. Steve says

    This doesn’t even come close to working. All it does is display the title of the page the search term is found on. The terms themselves aren’t wrapped in any tags whatsoever.

  6. DauAnunturi says

    Nice tutorial. And for those wo want to make some highlight with colors they must define their css class as div.highlight
    and replace the code with
    And that`s alll. Thanks and have fun.

返信を残す

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