記事を並べてカルーセルスライダーにするWordPressプラグイン[Carousel horizontal posts content slider]

よくある記事を横に並べて表示したい時ありますよね。当ブログでもそんな感じにしたかったので、導入しました。

トップページにいくと、こんな感じに表示できています。

とはいえ、こんな感じに導入するには、PHPで自作する方法とプラグインを導入する方法の2つがあります。自分でコーディングしていくのは何かと面倒なので、プラグインを導入する方法が手っ取り早いと思います。

そう思って、色々プラグインを探して見ましたが、思うような動作をしてくれるものがなかなか見つからず、今回やっと見つかったって感じです。

プラグイン探すのも一苦労ですね。

それが、Carousel horizontal posts content slider。略してCHPC Sliderらしいです。

デフォルトの表示だとすごく見にくいデザインですが、多少いじるとトップページにある表示みたいに見やすくなるので是非使って見てください。

プラグイン導入の仕方

普通に導入するだけです。説明はいらないですね。と思いましたが、この記事だけ見に来る人もいるかと思いますので、説明します。

まずは、管理画面のプラグインから新規追加を押します。

次にプラグインの追加っていう画面になりますので、プラグインの検索のところに、CHPC Sliderって入力して、インストール、有効化をするだけですね。

簡単です。

インストールはこれで終わりました。実際に設定していきましょう。

設定する

設定欄にCHPC Sliderっていうリンクが追加されていると思うので、クリックします。僕の設定を晒していきます。

まずはこんな感じで設定して、その後に少しずついじっていくといいと思います。

まず最初の方に、記事のアイキャッチ画像とタイトルのみ表示させる設定にしています。

表示したい記事カテゴリや記事数の設定をします。ここら辺は各々によって変わって来ると思いますので、実際にいじってください。細かく設定できるので便利です。

SPONSORED LINK

カルーセルスライダーの高さや横幅の設定です。これがしっくりきましたがこれよりでかくしたり小さくしたりしたい人は数字の部分をいじってみてください。他の設定は真似していただけると助かります。

デフォルトだと記事タイトルが大きすぎるので、僕の場合はCSSを少しいじっています。

実際には、

.chpcs_title {
 font-size: 12px;
}

っていうスタイルシートを適用させています。文字の大きさはこれくらいで十分かと思います。

同じように設定すると僕のブログのトップページみたいな表示になると思いますので是非設定してみてください。

設定はここまでになります。以上で終了ですが、Celtispackのプラグインを使っている方で拡張アイキャッチの機能を使用していると、このままではアイキャッチ画像がうまく表示されません。次の項目をお読みください。

注意!Celtis Packのプラグインを使っている方へ

拡張アイキャッチを使っていて、Youtubeなどの埋め込み動画や、外部サイトの画像を拡張アイキャッチとして設定したりしている記事があると、アイキャッチ画像のURLが以下のようなCeltispackのプラグインに自動で保存されるURLになります。

URLがuploadsの後にceltispack/thumbnailとなっているのが分かったでしょうか。このようなURLになっていると、普通の状態ではうまく表示されません。

少々弄る必要があります。

まずは、プラグインの編集ページに行きます。

以下のコメントで検索して特定の行に移動します。

/* Get image url */
    public  function get_post_image($post_image_id, $img_size) {
  
            if (has_post_thumbnail( $post_image_id ) ): 
             $img_arr = wp_get_attachment_image_src( get_post_thumbnail_id( $post_image_id ), $img_size ); $first_img = $img_arr[0];
            endif; 
    
            if(empty($first_img)) {


            if(empty($this->options['settings']['default_image_url'])) {

                 $first_img = plugins_url('assets/images/default-image.jpg', __FILE__);

            } else {

                $first_img = $this->options['settings']['default_image_url'];

            }
      }
        //$first_img = "<img src='". $first_img. "'/>";
        $first_img = get_the_post_thumbnail( $post_image_id, 'thumbnail' );
        return $first_img;
    }

最終的に、$first_imgという変数に画像のURLが格納されていますが、このままだと、wp_get_attachment_img_src()という関数で画像のURLが取得できずにデフォルトイメージが選択されていまいます。

一旦、$first_imgをコメントアウトして、$first_imgにget_the_post_thumbnail()関数を使用します。こうすることでceltispackで自動的に処理されたURLを取得できます。

実際には以下のコードです。

$first_img = get_the_post_thumbnail( $post_image_id, 'thumbnail' );

画像サイズはサムネイルに設定しているので、CHPC Sliderの設定ページから画像サイズを変更しても強制的にサムネイルになっちゃいますので、各自変更したい方はしてください。

これでアイキャッチ画像を全て表示できますので、今うまく表示できているという方でも、Celtispackの拡張アイキャッチ画像を使う設定にしている人は実際にこのコード書き換えをした方がいいと思います。

SPONSORED LINK

0 comments

コメントを残す