【WordPress】オリジナルテーマの下層ページを作り込もう！

【header.phpの読み込み方法】
<?php get_header(); ?>

【footer.phpの読み込み方法】
<?php get_footer(); ?>

【sidebar.phpの読み込み方法】
 <?php get_sidebar(); ?>

<?php get_header(); ?>

<main class="main single">
    <?php if ( have_posts() ) : ?>
        <?php while( have_posts() ) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <div class="wysiwyg-editor">
            <?php the_content(); ?>
        </div>
        <?php endwhile;?>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

.main.single{
  background: white;
  border-radius: 2px;
  margin: 20px auto;
  max-width: 940px;
  padding:30px;
}
.main.single h1{
  font-weight: bold;
  font-size:32px;
  margin:0;
}
.main.single .wysiwyg-editor h2{
  font-weight: bold;
  font-size:25px;
  margin:50px 0 0 0;
  padding:10px;
  background:#6cc6c4;
  color:white;
}
.main.single .wysiwyg-editor h3{
  font-size:22px;
  margin:40px 0 0 0;
  padding:0 0 10px 0;
  border-bottom:2px solid #6cc6c4;
}
.main.single .wysiwyg-editor h4{
  font-size:18px;
  margin:40px 0 0 0;
}
.main.single .wysiwyg-editor h4:before{
  content:"■";
  color:#6cc6c4;
}
.main.single .wysiwyg-editor h2:first-child,
.main.single .wysiwyg-editor h2 + h3,
.main.single .wysiwyg-editor h3 + h4{
  margin-top:25px;
}
.main.single .wysiwyg-editor p,
.main.single .wysiwyg-editor ul,
.main.single .wysiwyg-editor ol,
.main.single .wysiwyg-editor table{
  margin:25px 0 0 0;
  font-size:16px;
  line-height:1.7;
}
.main.single .wysiwyg-editor ul,
.main.single .wysiwyg-editor ol{
  margin-left:20px;
}
.main.single .wysiwyg-editor ul{
  list-style-type: disc;
}
.main.single .wysiwyg-editor ol{
  list-style-type: decimal;
}
.main.single .wysiwyg-editor table{
  border-collapse: collapse;
}
.main.single .wysiwyg-editor table th,
.main.single .wysiwyg-editor table td{
  border:1px solid #ddd;
  padding:10px;
}
.main.single .wysiwyg-editor .wp-block-table figcaption{
  font-size:14px;
  line-height:1.6;
  color:#666;
  margin:10px 0 0 0;
}

function iframe_in_div($the_content) {
  if ( is_single() ) {
    $the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
    $the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
  }
  return $the_content;
}
add_filter('the_content','iframe_in_div');

<div class="youtube">
    <iframe></iframe> /* 中にYouTubeのURL */
</div>

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.youtube iframe{
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

<?php get_header(); ?>

<main class="main page">
    <?php if ( have_posts() ) : ?>
        <?php while( have_posts() ) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <div class="wysiwyg-editor">
            <?php the_content(); ?>
        </div>
        <?php endwhile;?>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

//アイキャッチ画像を有効化
add_theme_support('post-thumbnails');

<?php get_header(); ?>
<main class="main single">
    <?php if ( have_posts() ) : ?>
        <?php while( have_posts() ) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <?php
        /* ここからアイキャッチ設定 */
        echo '<span class="image">';
        if ( has_post_thumbnail( $post->ID ) ) {
            echo get_the_post_thumbnail( $post->ID, 'large' );
        } else {
            echo '<img src="' . esc_url( get_theme_file_uri( "img/default-image.png" ) ) . '" alt="">';
        }
        echo '</span>';
        /* ここまで */
        ?>
        <div class="wysiwyg-editor">
            <?php the_content(); ?>
        </div>
        <?php endwhile;?>
    <?php endif; ?>
</main>
<?php get_footer(); ?>

// サムネイル (デフォルト 150px x 150px :最大値)
get_the_post_thumbnail( $post->ID, 'thumbnail' )

// 中サイズ (デフォルト 300px x 300px :最大値)
get_the_post_thumbnail( $post->ID, 'medium' )

// 大サイズ (デフォルト 640px x 640px :最大値)
get_the_post_thumbnail( $post->ID, 'large' )

// フルサイズ (アップロードした画像の元サイズ)
get_the_post_thumbnail( $post->ID, 'full' )

// 他のサイズ 
get_the_post_thumbnail( $post->ID, array( 100, 100 ) )

<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a href="/" itemprop="item"><span itemprop="name">TOP</span></a>
        <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a href="/category/design/" itemprop="item">
        <span itemprop="name">カテゴリー名</span></a>
        <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a href="/design/23/" itemprop="item">
        <span itemprop="name">記事タイトル</span></a>
        <meta itemprop="position" content="3">
    </li>
</ul>

// パンくずリストの構造化マークアップ
function breadcrumb_func(){
    global $post;
    $str ='';
    $url = esc_url((is_ssl() ? 'https' : 'http') . '://' . $_SERVER["HTTP_HOST"] . htmlspecialchars($_SERVER["REQUEST_URI"], ENT_QUOTES, 'UTF-8'));
    if(!is_home() && !is_admin()){
        $str.= '<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">';
        $str.= '<a href="'.home_url().'" itemprop="item"><span itemprop="name">'.'TOP'.'</span></a><meta itemprop="position" content="1"></li>';
        if( is_post_type_archive() ){
            $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.esc_html(get_post_type_object(get_post_type())->label ).'</span></a><meta itemprop="position" content="2"></li>';
        } elseif(is_tax()){
            $str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_post_type_archive_link( get_post_type() ).'" itemprop="item"><span itemprop="name">'.esc_html(get_post_type_object(get_post_type())->label ).'</span></a><meta itemprop="position" content="2"></li>';
            $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.single_term_title( '' , false ).'</span></a><meta itemprop="position" content="3"></li>';
        } elseif(is_tag()) {
            $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.single_tag_title( '' , false ).'</span></a><meta itemprop="position" content="2"></li>';
        } elseif(is_category()) {
            $cat = get_queried_object();
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_category_link($ancestor).'" itemprop="item"><span itemprop="name">'.get_cat_name($ancestor).'</span></a><meta itemprop="position" content="2"></li>';
                }
            }
            $str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.$cat-> cat_name.'</span></a><meta itemprop="position" content="3"></li>';
        } elseif(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
                    $str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. get_permalink($ancestor).'" itemprop="item"><span itemprop="name">'.get_the_title($ancestor).'</span></a><meta itemprop="position" content="2"></li>';
                    $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="3"></li>';
                }
            } else {
                $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="2" /></li>';
            }
        } elseif(is_single()){
            $categories = is_singular('achievement') ? get_terms($post->ID) : get_the_category($post->ID);
            $cat = $categories[0];
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_category_link($ancestor).'" itemprop="item"><span itemprop="name">'.get_cat_name($ancestor).'</span></a><meta itemprop="position" content="2"></li>';
                }
                $str.= '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_category_link($cat -> term_id).'" itemprop="item"><span itemprop="name">'.$categories[0]->cat_name.'</span></a><meta itemprop="position" content="3"></li>';
                $str.= '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="4"></li>';
            } else {
                $str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_category_link($cat -> term_id).'" itemprop="item"><span itemprop="name">'.$cat-> cat_name.'</span></a><meta itemprop="position" content="2"></li>';
                $str.= '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="3"></li>';
            }
        } else {
            $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="2"></li>';
        }
        $str.= '</ul>'."\n";
    }
    return $str;
}

<?php echo breadcrumb_func(); ?>

} elseif(is_single('カスタム投稿タイプで指定した名前')){
    $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">';
    $str.= '<a href="' . get_post_type_archive_link(get_post_type()) . '"><span itemprop="name">' . esc_html(get_post_type_object(get_post_type())->label ) . '</span></a></li>';
    $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.wp_title('', false).'</span></a><meta itemprop="position" content="3"></li>';
}

} elseif(is_archive()) {
    $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.esc_html(get_the_archive_title()).'</span></a><meta itemprop="position" content="2"></li>';
}

/* the_archive_titleで余計な文字を削除する */
add_filter( 'get_the_archive_title', function ($title) {
    if (is_category()) {
        $title = single_cat_title('',false);
    } elseif (is_tag()) {
        $title = single_tag_title('',false);
	  } elseif (is_tax()) {
	      $title = single_term_title('',false);
  	} elseif (is_post_type_archive() ){
	    	$title = post_type_archive_title('',false);
  	} elseif (is_date()) {
	      $title = get_the_time('Y年n月');
  	} elseif (is_search()) {
	      $title = '検索結果：'.esc_html( get_search_query(false) );
  	} elseif (is_404()) {
	      $title = '「404」ページが見つかりません';
  	} else {    }
      return $title;
});

<a href="<?php echo esc_url(get_permalink( 63 )); ?>">View More</a>

<?php /* Template Name: 新着記事全一覧 */?>
<?php get_header(); ?>

<main class="lower page-articles">
    <?php the_title( '<h1 class="lower-title">', '</h1>' ); ?>
    <section class="article-lists">

<?php
/**
* 記事一覧の表示
*/
$iPaged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$aPosts = new WP_Query([
    'posts_per_page' => get_option('posts_per_page'), // 件数の指定
    'paged' => $iPaged, // ページ番号
    'orderby' => 'date', // 並び順の対象（date=投稿日時）
    'order' => 'DESC', // 並び順を新しい順に
    'post_type' => 'post', // 投稿データが対象（pageにすると固定ページ）
    'post_status' => 'publish' // 公開されているデータが対象
]);

$iPages = $aPosts->max_num_pages;

if ( $aPosts->have_posts() ) :
    while ( $aPosts->have_posts() ) : $aPosts->the_post(); 
        // ID
        $iPostId = esc_html($post->ID);
        // 記事URL
        $sPostUrl = get_permalink($iPostId);
        // 公開日
        $sPostDate = mysql2date('Y.m.d', esc_html($post->post_date));
        // 抜粋・本文
        $sPostContent = strip_tags($post->post_content);
        $sPostExcerpt = esc_html($post->post_excerpt);
        if (trim($sPostExcerpt) == '') {
            // 抜粋が空だったら本文から文字を抽出
            $sPostExcerpt = mb_substr($sPostContent, 0, 60) . '...';
        }

        echo '<div class="box">';
        echo '<div class="detail">';
        echo '<p class="post-date">' . esc_html($sPostDate) . '</p>';
        echo '<h3 class="title"><a href="' . esc_url($sPostUrl) . '">' . esc_html($post->post_title) . '</a></h3>';
        echo '<p class="excerpt">' . esc_html($sPostExcerpt) . '</p>';
        echo '</div><!--/.detail-->';
        echo '</div><!--/.box-->';
    endwhile;
endif;

/**
* ページネーション
*/
$iRange = 4;
$iShowItems = ($iRange * 2) + 1;
// 現在のページ
global $paged;
if(empty($paged)) $paged = 1;
// ページ数
if (!$iPages){
    global $wp_query;
    $iPages = $wp_query->max_num_pages;
}
if(!$iPages) {
    $iPages = 1;
}
if(1 != $iPages) {
    echo "<div class=\"pagination\"><span>".$paged." / ".$iPages."</span>";
    if($paged > 2 && $paged > $iRange+1 && $iShowItems < $iPages) echo "<a href='".get_pagenum_link(1)."'>&laquo; 最初へ</a>";
    if($paged > 1 && $iShowItems < $iPages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; 前へ</a>";
    for ($i=1; $i <= $iPages; $i++) {
        if (1 != $iPages &&( !($i >= $paged+$iRange+1 || $i <= $paged-$iRange-1) || $iPages <= $iShowItems )) {
            echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
        }
    }
    if ($paged < $iPages && $iShowItems < $iPages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">次へ &rsaquo;</a>";
    if ($paged < $iPages-1 && $paged+$iRange-1 < $iPages && $iShowItems < $iPages) echo "<a href='".get_pagenum_link($iPages)."'>最後へ &raquo;</a>";
    echo "</div>\n";
}
?>

<?php wp_reset_query(); ?>

    </section>
</main>
<?php get_footer(); ?>

if ( $aPosts->have_posts() ) :
    while ( $aPosts->have_posts() ) : $aPosts->the_post(); 
        echo '<p class="catch-copy">' . esc_html($cfs->get('catch-copy')) . '</p>';
    endwhile;
endif;

while ( $aPosts->have_posts() ) : $aPosts->the_post();
    // この間に書く
endwhite;

$aCategory = get_the_category();
$sCategorySlug = $aCategory[0]->slug;
$sCategoryName = $aCategory[0]->cat_name;
// カテゴリースラッグを出力
echo esc_html($sCategorySlug);
// カテゴリー名を出力
echo esc_html($sCategoryName);

echo '<span class="image">';
if ( has_post_thumbnail( $post->ID ) ) {
    echo get_the_post_thumbnail( $post->ID, 'large' );
} else {
    echo '<img src="' . esc_url( get_theme_file_uri( "img/default-image.png" ) ) . '" alt="">';
}
echo '</span>';

echo '<div class="box">';
echo '<div class="detail">';
// アイキャッチここから
echo '<span class="image">';
if ( has_post_thumbnail( $post->ID ) ) {
    echo get_the_post_thumbnail( $post->ID, 'large' );
} else {
    echo '<img src="' . esc_url( get_theme_file_uri( "img/default-image.png" ) ) . '" alt="">';
}
echo '</span>';
// アイキャッチここまで
echo '<p class="post-date">' . esc_html($sPostDate) . '</p>';
echo '<h3 class="title"><a href="' . esc_url($sPostUrl) . '">' . esc_html($post->post_title) . '</a></h3>';
echo '<p class="excerpt">' . esc_html($sPostExcerpt) . '</p>';
echo '</div><!--/.detail-->';
echo '</div><!--/.box-->';

<?php if(have_posts()): while(have_posts()):the_post(); ?>
  <div class="box">
    <h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
    <p><?php the_category(', '); ?></p>
    <p><?php the_content('続きを見る'); ?></p>
  </div>
<?php endwhile; endif; ?>