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の先頭固定表示でできる6つのクールなこと

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

WordPressの先頭固定表示で何ができるのか気になりませんか?

先頭固定表示はWordPressではあまり知られていない機能の一つですが、あなたのサイトにとって本当に有益な機能です。スティッキー投稿を利用することで、重要なコンテンツを常に閲覧者に見せることができ、コンバージョンやエンゲージメントを高めることができます。

この投稿では、WordPressの先頭固定表示でできる6つのクールなことを紹介します。

Cool things to do with sticky posts in WordPress

先頭固定表示とは何か、なぜ使うべきなのか?

スティッキー投稿とは、サイトのブログページの先頭に固定表示するコンテンツのことです。トップページ、カテゴリー、アーカイブ、その他のページにも表示することができます。

WordPressサイトの柱となる記事、人気商品、お知らせ、割引キャンペーンなどを先頭固定表示することで、より多くの人の目に留まるようにすることができます。

時間が経つにつれてコンテンツが増えると、過去の投稿が新しいブログ投稿の下に埋もれてしまうため、先頭固定表示が威力を発揮します。その結果、ユーザーはあなたのトップ記事の存在に気づかず、サイト内でこれらの投稿を見つけることが難しくなります。

しかし、多くのサイトオーナーはWordPressの先頭固定表示機能を最大限に活用する方法を知りません。ここでは、先頭固定表示を使ってできるクールなことをいくつか紹介しよう。

以下のリンクをクリックすると、興味のあるセクションにジャンプできます:

1.サイドバーに先頭固定投稿を最近の記事として表示する

WordPressは、あなたのサイトのブログ投稿ページの先頭に固定表示します。しかし、サイトのサイドバーに最新の投稿として表示することもできます。

まず、Recent Posts Widget With Thumbnailsプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドを参照してください。

有効化したら、WordPress管理画面から外観 ” ウィジェットにアクセスします。次に、「+」記号をクリックして、「Recent Posts With Thumbnails」ウィジェットブロックを追加することができる。

Add recent posts with thumbnails widget block

ウィジェットブロックの設定では、「最近の投稿」などのタイトルを入力し、表示する投稿数を選択することができます。

次に、ウィジェット設定の「先頭固定表示」セクションまでスクロールダウンしてください。ここでは、スティッキー投稿のみを最近の投稿として表示し、リストの先頭に表示するオプションを有効化できます。

Show sticky posts as recent posts

完了したら、「更新」ボタンをクリックするだけです。

あなたのサイトにアクセスすると、サイドバーに「先頭固定表示」した投稿が最近の記事として表示されます。

2.カテゴリーへの先頭固定表示

初期設定では、付箋投稿はWordPressブログのフロントページにのみ表示されます。しかし、カテゴリーアーカイブページに特集コンテンツを表示したい場合はどうすればいいでしょうか?

Sticky Posts – Switchプラグインを使えばそれが可能です。

まず、Sticky Posts – Switchプラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化した後、WordPressの管理メニューから設定 ” Sticky Posts – Switchに行くことができます。カテゴリーページ “の下にある “カテゴリー “ボックスにチェックを入れるだけで、先頭固定表示投稿が表示されます。

Sticky posts switch settings

このプラグインは、WordPressダッシュボードの投稿日:ページに星のアイコンも追加します。

アイコンをクリックするだけで、素早く投稿に先頭固定表示ができます。コンテンツエディターを開いたり、クイック編集の設定を表示したりする必要はありません。

Click star icon to make post sticky

より詳細な手順については、WordPressでカテゴリーに先頭固定表示を追加する方法のチュートリアルをご覧ください。

3.最新の先頭固定表示投稿

通常、先頭固定表示はおすすめ投稿に使用され、最も目立つコンテンツを表示します。

しばらくすると、古いおすすめ投稿はアーカイブの下に消えてしまいます。カスタムアーカイブページやサイト上の任意の場所にそれらを表示することにより、古い特集コンテンツを復活させることができます。

コードスニペットを扱う必要がある場合は、WPCodeプラグインを使用することを強くお勧めします。スニペットをWordPressに貼り付ける方法については、本当に〜してもよいですか?

WPCode WordPress code snippets plugin

上級ユーザーであれば、このコードをテーマのfunctions.phpファイルに貼り付けることもできます。しかし、テーマファイルを直接編集することはお勧めしません。わずかなミスでサイトが壊れてしまう可能性があるからです。

function wpb_latest_sticky() { 

/* Get all sticky posts */
$sticky = get_option( 'sticky_posts' );

/* Sort the stickies with the newest ones at the top */
rsort( $sticky );

/* Get the 5 newest stickies (change 5 for a different number) */
$sticky = array_slice( $sticky, 0, 5 );

/* Query sticky posts */
$the_query = new WP_Query( array( 'post__in' => $sticky, 'ignore_sticky_posts' => 1 ) );
// The Loop
if ( $the_query->have_posts() ) {
	$return .= '<ul>';
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		$return .= '<li><a href="' .get_permalink(). '" title="'  . get_the_title() . '">' . get_the_title() . '</a><br />' . get_the_excerpt(). '</li>';

	}
	$return .= '</ul>';

} else {
	// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

return $return; 

}
add_shortcode('latest_stickies', 'wpb_latest_sticky');

このコードを追加したら、最新の先頭固定表示したい場所にショートコード [latest_stickies] を追加するだけです。詳しい手順は、WordPressで最新の先頭固定表示をする方法の投稿をご覧ください。

4.カスタム投稿タイプの先頭固定表示

WordPressでカスタム投稿タイプを先頭固定表示にできることをご存知ですか?

通常、先頭固定表示機能はWordPressの初期設定の投稿にしか利用できませんが、他の投稿タイプにこの機能を追加できないわけではありません。

Sticky Posts – Switchプラグインを使えば、カスタム投稿タイプをサイトに固定表示することができる。まず、プラグインをインストールして有効化します。WordPressプラグインのインストール方法については、こちらをご覧ください。

有効化したら、WordPressダッシュボードから設定 ” 先頭固定表示 – 切り替えにアクセスするだけです。投稿タイプ」カラムの下に、投稿日に作成したすべてのカスタム投稿タイプのリストが表示されます。

次の投稿では、先頭に固定表示したいカスタム投稿タイプのチェックボックスをクリックします。この例では、「Book Reviews」投稿タイプを先頭固定表示にします。

Visit the Settings » Sticky Posts - Switch Page to Configure the Plugin

より詳細な手順については、WordPressカスタム投稿タイプに先頭固定表示を追加する方法のチュートリアルをご覧ください。

5.WordPressループから先頭固定表示を非表示にする方法

スティッキー投稿を使用すると、WordPressの初期設定では、WordPressのすべての投稿の先頭に投稿が表示されることに気づくでしょう。

付箋投稿をWordPressのループから除外し、先頭に表示するには、WordPressサイトに次のカスタムコードを入力するだけです。

<?php
 
// The loop arguments
$args = array(
    'posts_per_page' => 10,
    'post__not_in' => get_option( 'sticky_posts' ) // do not display the sticky posts at all.
);
 
// The loop
$the_query = new WP_Query($args);
if ($the_query->have_posts()) {
    while ($the_query->have_posts()) {
        $the_query->the_post();
 
         }
}

このコードは、ループから先頭固定表示を完全に除外します。詳しくはWordPressのループから先頭固定表示を除外する方法のチュートリアルをご覧ください。

6.カテゴリー:WordPressの先頭固定表示のスタイリング

次の投稿では、カスタマイザーを追加しますか?

多くのWordPressテーマはpost_class()関数を使用して、各投稿に投稿クラスを自動的に追加しています。あなたのテーマがすでにpost_class()関数を使用している場合、あなたは「stickyクラス」があなたのsticky投稿に追加されるのを見るでしょう。

Sticky post class

これで、WordPressテーマで.stickyCSSクラスを使用することができます。ここでは、基本的なCSSを紹介します:

.sticky { 
background-color:#ededed;
border:1 px solid #f5f5f5;
color:#272727;
padding:5px;
}
 
.sticky:before {
  content: "Featured";
  color: #FFF;
  background: #f20000;
  padding: 10px;
  display: inline-block;
  text-align: right;
  float: right;
  font-weight: bold;
  text-transform: uppercase;
}

詳しくは、WordPressでカスタムCSSを追加する方法をご覧ください。

この投稿が、WordPressサイトの先頭固定表示でできるクールなことを学ぶのに役立てば幸いです。オンラインストアの始め方や、初心者のための究極のWordPress SEOガイドもご覧ください。

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

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

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

    Is there any easy way to show sticky post or any specific post on homepage without any other post. I mean only sticky post

  3. emiliano says

    hi,
    it’ possible to saves the notes in profile page of users ?
    When the users saves a note is automatically saves on profile page

  4. WPBeginner Staff says

    Yes you got the point. First you will install the plugin to enable sticky posts for categories. After that you can make posts sticky for specific categories. Later you can make it unsticky. Your post will remain live and will not give a 404 error.

  5. Dave Gasser says

    This site is an excellent source for all things WordPress. I just finished the article on sticky notes and instantly thought of product launches. Post your sticky note squeeze page and program it to auto expire once you are ready to get back to business as usual. Great article and great site.

  6. Rich says

    I was just tango-ing with sticky post customization this week. This is a very good overview of sticky post capabilities. Thanks!

  7. Charlie Sasser says

    So would some of this be helpful if I wanted to display in a dedicated area only the category “News” that were sticky?Then when the news was stale it would drop off but not be gone and prevent a 401 error? Or is there a better way or plugin to do this for non-coders?

返信を残す

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