ハンドメイドアクセサリーのギャラリーサイトのトップページに、アクセサリーの種類別に新着の写真を掲載したかったので、カテゴリーの新着情報を表示できるWordPressプラグインを捜しました。
管理画面の「プラグイン追加」で、shortcodeではダントツトップの Shortcodes Ultimate をインストールしました。カスタマイズが出来る高機能なプラグインなので、少し手間がかかりますが、新着画像とタイトル風のリンクを貼ることが出来ました。
Shortcodes Ultimate の概要
50以上の美しいショートコード
1-click shortcode insertion with live preview「Gutenberg」に対応しています
プラグインの説明より
任意のテーマで動作します
Modern responsive design
ドキュメンテーション
カスタム CSS エディター
カスタムウィジェット
翻訳対応
RTL サポート
開発者にも使いやすい
インストールして有効にすると、投稿画面にショートコード［］の表示が追加されます。 ［］ をクリックすると、挿入できるショートコードのリストが表示されます。
Shortcodes Ultimate のカスタマイズ
Shortcodes Ultimate で自由度の高い記事一覧を作る
Shortcodes Ultimateの投稿の表示は、カテゴリーやタグ（複数選択可）毎の記事一覧（サムネイル有り無しなど3種類）を表示出来ます。画像とタイトルだけの場合は、Shortcodes Ultimateのギャラリーを使用します。ページだけでなくウィジェットにも使用できます。
Shortcodes Ultimateの投稿の表示のテンプレートは4種類
- templates/default-loop.php：サムネイルとタイトルと概要
- templates/teaser-loop.php：サムネイルとタイトル
- templates/single-post.php：シングル投稿テンプレート（1投稿のみ）
- templates/list-loop.php：記事のタイトルのリスト
Shortcodes Ultimateの投稿の表示のテンプレートのカスタマイズ
FTPでテンプレートファイルを確認し、CSSのクラスなどを確認します。CSSで変更出来ない部分はテンプレートを変更します。今回はdefault-loop.phpを編集します。
Shortcodes Ultimateのテンプレートの場所
wp-content/plugins/shortcodes-ultimate/includes/partials/shortcodes/posts/templates/変更前の default-loop.php
テンプレート内に、テンプレートの変更の仕方へリンクが掲載されています。
<?php defined( 'ABSPATH' ) || exit; ?>
<?php
/**
* READ BEFORE EDITING!
*
* Do not edit templates in the plugin folder, since all your changes will be
* lost after the plugin update. Read the following article to learn how to
* change this template or create a custom one:
*
* https://getshortcodes.com/docs/posts/#built-in-templates
*/
?>
<div class="su-posts su-posts-default-loop <?php echo esc_attr( $atts['class'] ); ?>">
<?php if ( $posts->have_posts() ) : ?>
<?php while ( $posts->have_posts() ) : ?>
<?php $posts->the_post(); ?>
<?php if ( ! su_current_user_can_read_post( get_the_ID() ) ) : ?>
<?php continue; ?>
<?php endif; ?>
<div id="su-post-<?php the_ID(); ?>" class="su-post <?php echo esc_attr( $atts['class_single'] ); ?>">
<?php if ( has_post_thumbnail( get_the_ID() ) ) : ?>
<a class="su-post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<h2 class="su-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="su-post-meta">
<?php esc_html_e( 'Posted', 'shortcodes-ultimate' ); ?>: <?php the_time( get_option( 'date_format' ) ); ?>
</div>
<div class="su-post-excerpt">
<?php the_excerpt(); ?>
</div>
<?php if ( have_comments() || comments_open() ) : ?>
<a href="<?php comments_link(); ?>" class="su-post-comments-link"><?php comments_number( __( '0 comments', 'shortcodes-ultimate' ), __( '1 comment', 'shortcodes-ultimate' ), '% comments' ); ?></a>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<h4><?php esc_html_e( 'Posts not found', 'shortcodes-ultimate' ); ?></h4>
<?php endif; ?>
</div>CSSの変更
ショートコード > 設定 > 全般設定 > カスタムCSS
- サムネイル：画像サイズを大きくしたい
- タイトルの表示方法を変更する
- コメントは不要
.su-posts-default-loop .su-post-thumbnail {
float: left;
display: block;
width: 160px;
height: 120px;
margin-right: 1em;
}
.su-posts-default-loop .su-post-thumbnail img {
max-width: 160px;
max-height: 160px;
}
.su-posts-default-loop .su-post {
margin-bottom: 1.5em;
line-height: 1.5;
}
.su-posts-default-loop .su-post-title {
テンプレートを変更するのでやめた
}
.su-posts-default-loop .su-post-comments-link { display:none; }Shortcodes Ultimateの投稿のテンプレートを編集する方法
FTPで使用しているテーマ（子テーマ）の「templates」フォルダにコピーして編集する
/wp-content/themes/使用しているテーマ（子テーマ）/templates/default-loop.php公開日：the_time・更新日：the_modified_dateを併記
文字化けしたので、文字コードを見たら「ASCII」になっていたので「UTF-8」に変更
<?php esc_html_e( 'Posted', 'shortcodes-ultimate' ); ?>: <?php the_time( get_option( 'date_format' ) ); ?><?php echo '・更新日'; ?>: <?php the_modified_date( get_option( 'date_format' ) ); ?>emplates/teaser-loop.php：サムネイルとタイトル
更新日を表示する。文字コードを「ASCII」から「UTF-8」に変更
<div class="su-post-meta">
<?php echo '更新日'; ?>: <?php the_modified_date( get_option( 'date_format' ) ); ?>
</div>
コメント