2019-05-21 / 最終更新日 : 2019-06-19 Yasuko Yakuwa Customize

WP Posts Carouselを真面目に改変してみる（プラグインの改変）

カルーセルタイプのコンテンツスライダープラグインWP Posts Carouselは、Advanced post sliderよりもカルーセル時の動きがよい感じ（ちゃんと一コマずつ動く）なので、導入してみたいと思っています。ただ、やはり表示が自分の好みではない部分もあるので、すこし真面目に改変してみたいと思います。

「真面目に」というのは、直接プラグインのコードをいじるという安直な方法ではなく、アップデート時にも問題が起きないように外部ファイルを使用して改変をする、という意味です。面倒がらずにやってみましょう(笑)

WP Post Carouselのフォルダには「readme.txt」が同梱されていまして、そこをよく読むと改変方法が書かれています。

functions.phpの改変

投稿記事のサムネイルのすぐ下に投稿日を、その下にタイトルを表示させたいと思います。タイトルについているh3タグも外して、divタグに変更したいです。これにはプラグインのcarousel-generator.class.phpを直接変更するのではなくて、自分の子テーマのfunctions.phpで変更を加えてやります。

readme.txtには、使えるフィルター・フックやアクション・フックが書かれています。タイトル部分の改変の例が参考ページにありましたので、それを参考にして変更してみます。

carousel-generator.class.phpのコードは以下のようになっています。

（略）
/*
* show title
*/
if ( $params[‘show_title’] === ‘true’ ) {
$title = ‘<h3 class=”wp-posts-carousel-title”>’;
$title.= ‘<a href=”‘ . $post_url . ‘” title=”‘ . $post->post_title . ‘”>’ . $post->post_title . ‘</a>’;
$title.= ‘</h3>’;
}
（略）
$out.= apply_filters(‘wpc_item_title’, $title, array(
‘post_url’ => $post_url,
‘post’ => $post,
‘params’ => $params,
));
（略）

これに対して、以下のような記述を自分のfunctions.phpに追加します。元のコードにある「wpc_item_title」というフィルター・フックに対して、add_filter(‘wpc_item_title’, ‘my_wpc_item_title’)で自作の関数を紐づけて、上段で設定されている$titleの内容を書き換えています。

function my_wpc_item_title( $title, $params ) {
$created_date = get_the_date();
$myTitle = $params[‘post’]->post_title;
$title = ‘<p class=”wp-posts-carousel-created-date”>’ . $created_date . ‘</p>’;
$title .= ‘<div class=”wp-posts-carousel-title”>’ . $myTitle . ‘</div>’;
return $title;
}
add_filter(‘wpc_item_title’, ‘my_wpc_item_title’, 1, 2);

タイトルを$myTitleとして、その前に$create_dateを持ってきました。さらに、タイトルについていた「h3」タグを外して「div」にし、aタグも外しました。

スタイルシートの変更

タイトルが長いと全体の表示がずれてしまう（ナビゲーションのドットマークが上下してしまう）場合があるので、長いタイトルの文字数を切ってdivのheightによって高さをそろえたいと思います。また、タイトル部分のスタイルも改めて指定します。

WP Posts Carouselにはあらかじめ４つのテンプレート（表示スタイル）が選択できるようになっています。自分の好みのスタイルでも少しタイトルの文字の大きさを変更したいな、とか、自分の使用しているテーマと設定がかぶっている部分のスタイルを変更したいと思うところがあります。その場合、好みのcssをコピーしたcssファイルを使って部分的に変更するのがよいと思います。

  1. templatesフォルダの下にある好みのcssファイル（例：light.css）をコピーして、リネーム（例：custom.css）
  2. custom.cssファイルを開いて、「light-theme」という文字列をすべて「custom-theme」に置換
  3. 自サーバーの自分が現在使用しているテーマフォルダの下に「css」というフォルダを作り、その中にcustom.cssファイルをアップロードする
  4. これでWP Posts Carouselの挿入画面から「custom.css」が選択できるようになる
  5. custom.css内で変更したい部分を書き換える。
    記事タイトルの文字の大きさやアラインメントを変えるには「.custom-theme.wp-posts-carousel .wp-posts-carousel-title { text-align: center; font-size: 18px; }」部分を書き換える。
    記事全体の高さをそろえるために「.custom-theme.wp-posts-carousel .wp-posts-carousel-container」にheightを指定してやる（今回は230pxに設定）。{ overflow: hidden; }が設定されているので、はみ出した分は非表示になる。

こんな感じで必要な部分を書き換えたり、新たにスタイルを設定してやります。

実際の表示方法

プラグインを有効化すると、ビジュアルモードの投稿画面の右上にスライダーの挿入ボタンが表示されるようになります。ボタンをクリックしてポップアップが出たら、その画面で必要事項を入力してインサートボタンを押すと、記事部分にショートコードが挿入されます。

このページ上部のスライダーのコードは以下のようになります。

[wp_posts_carousel template="custom.css" post_types="post" all_items="15" show_only="id" exclude="" posts="" ordering="desc" categories="" relation="and" tags="" show_title="true" show_created_date="false" show_description="false" allow_shortcodes="true" show_category="false" show_tags="false" show_more_button="false" show_featured_image="true" image_source="thumbnail" image_height="100" image_width="100" items_to_show_mobiles="2" items_to_show_tablets="3" items_to_show="4" slide_by="1" margin="5" loop="true" stop_on_hover="true" auto_play="true" auto_play_timeout="1500" auto_play_speed="1500" nav="true" nav_speed="1500" dots="true" dots_speed="800" lazy_load="false" mouse_drag="false" mouse_wheel="false" touch_drag="true" easing="linear" auto_height="true" custom_breakpoints=":"]

設定を変更するのはちょっと面倒で、上記のコードを直接書き換えていきます。例えばカテゴリーを表示させたい場合は「show_category=”false”」を「show_category=”true”」に書き換えるなどです。

カテゴリー
Customize、Plugin
タグ