私のサイトでは「短歌」「頂いたもの」などのカスタム投稿を追加しています。
結構簡単に実装できるので、よろしければ参考にしてみてください。
※使用テーマはk2様のsimple kojinsiteを利用しています。
function.phpを編集する
※編集前に必ずバックアップを取ってください。
私は投稿タイプ「小説」をベースに「短歌」を、投稿タイプ「ノート」をベースに「頂いたもの」を作成しています。
function.phpの106行目あたりに追加したい投稿タイプを作成します。
▶コード
// 短歌
register_post_type(
'tanka',
array(
'label' => '短歌',
'public' => true,
'has_archive' => true,
'show_in_rest' => true,
'menu_position' => 5,
'supports' => array(
'title',
'editor',
'thumbnail',
'revisions',
),
)
);
// 頂いたもの (treasure)
register_post_type(
'treasure',
array(
'label' => '頂いたもの',
'public' => true,
'has_archive' => true,
'show_in_rest' => true,
'menu_position' => 2,
'supports' => array(
'title',
'editor',
'thumbnail',
'revisions',
),
)
);投稿タイプにタグ付けをしたい場合は、128～129行目の間に追記します。
▶コード
register_taxonomy_for_object_type('category', 'treasure');
register_taxonomy_for_object_type('post_tag', 'treasure');
register_taxonomy_for_object_type('category', 'tanka');
register_taxonomy_for_object_type('post_tag', 'tanka');161行目あたりに編集画面で表示する内容を追加します。
▶コード
// tankaのカスタムフィールドのメタボックス
function add_tanka_custom_fields()
{
add_meta_box('tanka_meta_id', '一覧で表示させる説明文', 'insert_novel_custom_fields', 'tanka', 'side', 'default');
}
add_action('add_meta_boxes', 'add_tanka_custom_fields');
// tankaのカスタムフィールドの入力エリア
function insert_tanka_custom_fields($post)
{
$custom_text = get_post_meta($post->ID, 'custom_text', true); // テキストフィールドの値を取得
echo '<textarea name="custom_text" style="width: 100%;">' . esc_textarea($custom_text) . '</textarea>';
}
// treasureのカスタムフィールドのメタボックス
function add_treasure_custom_fields()
{
add_meta_box('treasure_meta_id', '一覧で表示させる説明文', 'insert_novel_custom_fields', 'treasure', 'side', 'default');
}
add_action('add_meta_boxes', 'add_treasure_custom_fields');
// treasureのカスタムフィールドの入力エリア
function insert_treasure_custom_fields($post)
{
$custom_text = get_post_meta($post->ID, 'custom_text', true); // テキストフィールドの値を取得
echo '<textarea name="custom_text" style="width: 100%;">' . esc_textarea($custom_text) . '</textarea>';
}これで大体終わりです。
あとはサイトトップやアーカイブなどを編集していきます。
index.phpを編集する
好きなところに表示させていきます。リンクの前に表示する場合は189行目あたりです。
ほぼ「小説」と「ノート」のコピペです。若干違うのは、「頂いたもの」に表示する文字列はタイトルを表示するようにしています。この辺りはお好みで。
▶コード
<!-- 短歌 -->
<?php
$args = [
'post_type' => 'tanka',
'posts_per_page' => 3, // 表示する数
];
$my_query = new WP_Query($args);
?>
<?php if ($my_query->have_posts()) : // 投稿がある場合
?>
<div class="contents__wrap">
<div class="page__ttl">短歌</div>
<ul class="cards__txt">
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<div class="cards__txt--wrap">
<?php if (has_post_thumbnail()) : ?>
<div class="cards__txt--thumb">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<div>
<div class="cards__txt--ttl"><?php the_title(); ?></div>
<div class="pc-on">
<?php
$custom_text_value = get_post_meta(get_the_ID(), 'custom_text', true);
?>
<?php if ($custom_text_value) : ?>
<div class="cards__txt--description"><?php echo esc_html($custom_text_value); ?></div>
<?php endif; ?>
<?php
$categories = get_the_category(); // カテゴリーを取得
if ($categories) { // カテゴリーが存在する場合
echo '<ul>';
foreach ($categories as $category) {
echo '<li class="tag__txt '.$category->slug.'">';
echo $category->name; // カテゴリー名のみ出力
echo '</li>';
}
echo '</ul>';
}
?>
<?php
$tags = get_the_tags(); // タグを取得
if ($tags) { // タグが存在する場合
echo '<div class="tag">';
echo '<ul class="tag__list">';
foreach ($tags as $tag) {
echo '<li>' . $tag->name . '</li>'; // タグ名のみ出力
}
echo '</ul>';
echo '</div>';
}
?>
</div>
</div>
</div>
<div class="sp-on">
<?php
$custom_text_value = get_post_meta(get_the_ID(), 'custom_text', true);
?>
<?php if ($custom_text_value) : ?>
<div class="cards__txt--description"><?php echo esc_html($custom_text_value); ?></div>
<?php endif; ?>
<?php
$categories = get_the_category(); // カテゴリーを取得
if ($categories) { // カテゴリーが存在する場合
echo '<ul>';
foreach ($categories as $category) {
echo '<li class="tag__txt '.$category->slug.'">';
echo $category->name; // カテゴリー名のみ出力
echo '</li>';
}
echo '</ul>';
}
?>
<?php
$tags = get_the_tags(); // タグを取得
if ($tags) { // タグが存在する場合
echo '<div class="tag">';
echo '<ul class="tag__list">';
foreach ($tags as $tag) {
echo '<li>' . $tag->name . '</li>'; // タグ名のみ出力
}
echo '</ul>';
echo '</div>';
}
?>
</div>
</a>
</li>
<?php endwhile; ?>
</ul>
<a class="more-btn" href="<?php echo get_post_type_archive_link('tanka'); ?>">View All</a>
</div>
<?php else : ?>
<?php endif;
wp_reset_postdata(); ?>
<!-- 頂いたもの-->
<?php
$args = [
'post_type' => 'treasure',
'posts_per_page' => 3, // 表示する数
];
$my_query = new WP_Query($args); ?>
<?php if ($my_query->have_posts()) : // 投稿がある場合
?>
<div class="contents__wrap">
<h2 class="page__ttl">頂いたもの</h2>
<ul class="cards cards__blog cards__blog--top">
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li class="card">
<a href="<?php the_permalink(); ?>">
<?php if (has_post_thumbnail()) : /* もしアイキャッチが登録されていたら */ ?>
<?php the_post_thumbnail(); ?>
<?php else : /* 登録されていなかったら */ ?>
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/img/noimage.png" alt="">
<?php endif; ?>
<div class="card__txt">
<div class="card__date"><?php the_time('Y.n.j'); ?></div>
<div class="treasure-ttl">
<?php the_title(); ?>
</div>
<?php
$custom_text_value = get_post_meta(get_the_ID(), 'custom_text', true);
?>
<?php if ($custom_text_value) : ?>
<p><?php echo esc_html($custom_text_value); ?></p>
<?php endif; ?>
</div>
</a>
</li>
<?php endwhile; ?>
</ul>
<a class="more-btn" href="<?php echo get_post_type_archive_link('treasure'); ?>">View All</a>
</div>
<?php else : ?>
<?php endif;
wp_reset_postdata(); ?>
同じ内容をtag.phpの156行目とcategory.phpの152行目にもコピペします。
archive-〇〇.phpを作成する
archive-tanka.phpはarchive-novel.phpを複製して編集します。
「novel」を「tanka」に置換すれば完了です。具体的には13行目、24行目、38行目です。
archive-treasure.phpはarchive.phpを複製して編集します。
8行目のタイトル以外には、32行目～42行目を丸ごと編集します。この辺は好みだと思います。
▶コード
<p><?php the_time('Y.n.j'); ?></p>
<div class="treasure-ttl">
<?php the_title(); ?>
</div>
<?php
$custom_text_value = get_post_meta(get_the_ID(), 'custom_text', true);
?>
<?php if ($custom_text_value) : ?>
<p><?php echo esc_html($custom_text_value); ?></p>
<?php endif; ?>あとは細かいCSSの調整をして完成です。
▶コード
.treasure-ttl {
font-size: 1.1em;
font-weight: bold;
margin: 0 0 8px;
}×
Category:
Tags:
※コメントは最大500文字、5回まで送信できます