<?php
/* （ステップ1）データの取得 */
$query = new WP_Query(
array(
'post_type' => 'interview',
'posts_per_page' => -1,
)
);
?>
<?php
/* （ステップ2）データの表示 */
if ($query->have_posts()) : ?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<!-- 基本の取得 -->
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<p><?php the_date(); ?></p>
<p><?php the_category(", "); ?></p>
<p><?php the_excerpt(); ?></p>
<?php if (has_post_thumbnail()) : ?>
<p><?php the_post_thumbnail(); ?></p>
<?php endif; ?>
<!-- カスタムポストの取得（ACFプロの繰り返し） -->
<?php if (have_rows('interview_item')) : ?>
<?php while (have_rows('interview_item')) : the_row(); ?>
<div class="box-item">
<div class="item-content">
<p class="item-title"><?php the_sub_field('interview_title'); ?></p>
<p class="item-name">
<span class="years"><?php the_sub_field('interview_years'); ?></span>
<?php the_sub_field('interview_name'); ?>
</p>
<ul class="item-interview-list">
<?php if (have_rows('interview_qa')) : ?>
<?php while (have_rows('interview_qa')) : the_row(); ?>
<li>
<p class="interview-q"><?php the_sub_field('interview_q'); ?></p>
<p class="interview-a"><?php the_sub_field('interview_a'); ?></p>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<!-- //カスタムポストの取得（ACFプロの繰り返し） -->
<?php endwhile; ?>
<?php endif;
wp_reset_postdata(); ?>
WP ACF PROで繰り返しの使い方
<div>
<h3>メニュー</h3>
<?php if( have_rows('shop_menu') ): ?>
<?php while ( have_rows('shop_menu') ) : the_row(); ?>
<dl>
<dt><?php the_sub_field('menu_name'); ?></dt>
<dd><?php the_sub_field('menu_price'); ?>円</dd>
</dl>
<?php endwhile; ?>
<?php endif; ?>
</div>
WP RSSで表示する
１つ目：Simple Pieを利用する
2行目のfeedurlには、RSSのURLを入れます。 そして、WordPressの関数、fetch_feed()に渡すことで、アイテムを取得してくれますので、ループで表示を行います。
<?php
include_once(ABSPATH . WPINC . '/feed.php');
$feeduri = 'http://example.com/feed/uri/here';
$rss = fetch_feed($feeduri);
if (!is_wp_error($rss)) :
$maxitems = $rss->get_item_quantity(4); // 4件表示
$rss_items = $rss->get_items(0, $maxitems);
endif;
if ($rss_items) {
foreach ($rss_items as $i) {
?>
<li><a href="<?php echo esc_url($i->get_permalink()); ?>"><?= $i->get_date('Y年m月j日'); ?><?php echo esc_html($i->get_title()); ?></a></li>
<?php
}
}
?>
下記のサイトを参考にしました。
2つ目：RSS Importプラグインを入れて、下記のコードを入れる
// PHPに入力の場合 <?php RSSImport(5, "http://rssblog.ameba.jp/アメブロID/rss20.xml"); ?> // ショートコードの場合 [RSSImport display="5" feedurl="http://rssblog.ameba.jp/アメブロID/rss20.xml"]
下記のサイトを参考にしました。
WordPress：プラグイン”RSSImport”を使って気になるサイト等の最新情報を表示させる方法 | Webデザイン ABC
ワードプレスにアメブロの新着情報を載せる方法 | Crea Webdesign｜ホームページ制作代行【格安・オンライン全国対応・三重県鈴鹿市】
WP カスタム投稿 個別ページのパンクずリスト
<nav id="breadcrumbs">
<ul>
<li><a href="<?php echo home_url(); ?>">HOME</a></li>
<li class="separator"> > </li>
<li>
<?php
$term_obj = get_the_terms(get_the_ID(), 'menu_cat');
$term_obj = $term_obj[0];
echo get_term_parents_list(
$term_obj->term_id,
'menu_cat',
array(
'separator' => '</li>',
'link' => true,
)
);
?>
<li class="separator"> > </li>
<li><?php the_title(); ?> </li>
</ul>
</nav>
CSS 画像をマスクで切り抜き
<div class="masked"></div>
.masked {
width: 100px;
height: 100px;
background-color: #8cffa0;
-webkit-mask-image: url(star.svg);
mask-image: url(star.svg);
mask-repeat: no-repeat;
mask-position: 0 0;
mask-size: 100%;
}
