WordPress自作テーマ制作⑧│見た目（style.css）の作成

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="site-title">
<?php
$logo = get_custom_logo();
if ($logo === '') {
    $logo = '<a href="' . esc_url(home_url('/')) . '" rel="home">' . esc_html(get_bloginfo('name')) . '</a>';
}
// 最新投稿をトップに表示する場合だけサイト名をh1にする。
$tag = (is_front_page() && is_home()) ? 'h1' : 'div';
echo '<' . $tag . ' class="site-branding">' . $logo . '</' . $tag . '>';
?>
<p class="catchphrase"><?php echo esc_html(get_bloginfo('description')); ?></p>
</div>
<?php wp_nav_menu(['theme_location' => 'global_menu', 'fallback_cb' => false]); ?>
<?php waza_theme_breadcrumb(); ?>

<?php get_sidebar(); ?>

<!-- サイドバーはsidebar.phpで一度だけ出力します。 -->
<footer id="footer">
    <div class="footer-container">
        <?php if (is_active_sidebar('footer')) : ?>
            <div id="footer_widget">
                <?php dynamic_sidebar('footer'); ?>
            </div>
        <?php endif; ?>
        <ul class="footer-menu-list">
            <?php
            wp_nav_menu([
                'container'       => '',
                'theme_location'  => 'footer_menu',
                'items_wrap'      => '%3$s',
                'link_before'     => '<span >',
                'link_after'      => '</span>',
            ]);
            ?>
        </ul>
        <div class="copyright">
            ©2023 <?php bloginfo('name'); ?>
        </div>
    </div>
</footer>
<?php wp_footer(); ?>
</body>

</html>

<?php get_header(); ?>
<div class="wrap">
    <main id="main-content" class="main-content">
        <?php
        if (have_posts()) :
            while (have_posts()) : the_post();
        ?>
                <h1 class="title"><?php the_title(); ?></h1>
                <div class="date">
                    <div class="time"><?php the_time('Y/m/d'); ?></div>
                    <div class="modify"><?php the_modified_date('Y/m/d'); ?>
                    </div>
                </div>
                <?php
                if (has_post_thumbnail()) {
                    echo '<figure class="eyecatch">' . get_the_post_thumbnail() . '</figure>';
                }
                ?>
                <div class="content">
                    <?php
                    the_content();
                    wp_link_pages();
                    ?>
                </div>
        <?php
            endwhile;
        endif;
        ?>
    </main>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>
<div class="wrap">
    <main id="main-content" class="main-content">
        <?php
        if (have_posts()) :
            while (have_posts()) : the_post();
        ?>
                <h1 class="title"><?php the_title(); ?></h1>
                <?php
                if (has_post_thumbnail()) {
                    echo '<figure class="thumbnail">' . get_the_post_thumbnail() . '</figure>';
                }
                ?>
                <div class="content">
                    <?php
                    the_content();
                    wp_link_pages();
                    ?>
                </div>
        <?php
            endwhile;
        endif;
        ?>
    </main>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>
<main id="main-content" class="main-content">
<?php the_archive_title('<h1 class="title">', '</h1>'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if (has_post_thumbnail()) : ?><figure class="thumbnail"><?php the_post_thumbnail(); ?></figure><?php endif; ?>
<div class="excerpt"><?php the_excerpt(); ?></div>
</article>
<?php endwhile; ?>
<?php the_posts_pagination(['prev_text'=>'前へ', 'next_text'=>'次へ']); ?>
<?php else : ?><p>表示できる記事がありません。</p><?php endif; ?>
</main>
<?php get_footer(); ?>

<?php get_header(); ?>
<div class="wrap">
    <main id="main-content" class="main-content">
        <?php
        if (have_posts()) :
            while (have_posts()) : the_post();
        ?>
                <a href="<?php the_permalink(); ?>">
                    <h2 class="title"><?php the_title(); ?></h2>
                    <div class="date">
                        <div class="modify"><?php the_time('Y/m/d'); ?></div>
                    </div>
                    <?php
                    if (has_post_thumbnail()) {
                        echo '<figure class="thumbnail">' . get_the_post_thumbnail() . '</figure>';
                    }
                    ?>
                </a>
        <?php
            endwhile;
            $pagination = get_the_posts_pagination(array(
                'prev_text' => 'Prev',
                'next_text' => 'Next'
            ));
            echo $pagination;
        endif;
        ?>
    </main>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>
<main id="main_content" class="main-content">
    <h1 class="title">ページが見つかりませんでした。</h1>
    <div class="content">
        <p>お探しのページは移動または削除された可能性があります。</p>
        <p>以下より キーワード を入力して検索してみてください。</p>
        <?php get_search_form(); ?>
    </div>
</main>
<?php get_footer(); ?>

<form role="search" method="get" class="searchForm" action="<?php echo esc_url(home_url('/')); ?>">
<label>検索キーワード
<input type="search" name="s" value="<?php echo esc_attr(get_search_query(false)); ?>" placeholder="キーワードを入力">
</label>
<button type="submit">検索</button>
</form>

<?php get_header(); ?>
<main id="main-content" class="main-content">
<h1 class="title"><?php echo esc_html(get_search_query(false)); ?> の検索結果</h1>
<?php get_search_form(); ?>
<?php if (preg_match('/[^\s\p{Z}]/u', get_search_query(false)) !== 1) : ?>
<p>検索キーワードを入力してください。</p>
<?php else : ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if (has_post_thumbnail()) : ?><figure class="thumbnail"><?php the_post_thumbnail(); ?></figure><?php endif; ?>
<div class="excerpt"><?php the_excerpt(); ?></div>
</article>
<?php endwhile; ?>
<?php the_posts_pagination(['prev_text'=>'前へ', 'next_text'=>'次へ']); ?>
<?php else : ?><p>表示できる記事がありません。</p><?php endif; ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>

<?php

// 外観のメニュー表示
add_theme_support('menus');

// 外観のウィジェット表示
add_theme_support('widgets');

// カスタムロゴの表示
add_theme_support('custom-logo');

// タイトルタグの表示
add_theme_support('title-tag');

// アイキャッチの表示
add_theme_support('post-thumbnails');

// WordPressのバージョン情報
remove_action('wp_head', 'wp_generator');

// 絵文字
add_filter('emoji_svg_url', '__return_false');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');

// Windows Live Writeの停止
remove_action('wp_head', 'wlwmanifest_link');

// EditURI(RSD Link)の停止
remove_action('wp_head', 'rsd_link');

// 記号の自動変換停止(wptexturize無効化)
add_filter('run_wptexturize', '__return_false');

// https://api.w.org/の停止
remove_action('wp_head', 'rest_output_link_wp_head');

// メニュー位置の設定
function setup_nav_menu() {
    register_nav_menu('global_menu', 'グローバルメニュー');
    register_nav_menu('footer_menu', 'フッターメニュー');
}
add_action('after_setup_theme', 'setup_nav_menu');

// ウィジェットエリアの登録
function register_area() {
    register_sidebar([
        'name' => 'サイドバー',
        'id' => 'sidebar',
        'description' => 'サイドバーに表示されます。',
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
    ]);
    register_sidebar([
        'name' => 'フッター',
        'id' => 'footer',
        'description' => 'フッターに表示されます。',
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
    ]);
}
add_action('widgets_init', 'register_area');


function waza_theme_breadcrumb() {
    if (is_front_page()) return;
    $items = [[home_url('/'), 'トップ']];
    if (is_singular()) {
        $id = get_queried_object_id();
        if (is_page()) {
            foreach (array_reverse(get_post_ancestors($id)) as $parent) $items[] = [get_permalink($parent), get_the_title($parent)];
        } elseif (is_single() && get_post_type($id) === 'post') {
            $terms = get_the_category($id);
            if ($terms) {
                $term = $terms[0];
                $ids = array_reverse(get_ancestors($term->term_id, 'category', 'taxonomy'));
                $ids[] = $term->term_id;
                foreach ($ids as $tid) {
                    $t = get_term($tid, 'category'); $url = get_term_link($tid, 'category');
                    if ($t && !is_wp_error($t) && !is_wp_error($url)) $items[] = [$url, $t->name];
                }
            }
        }
        $label = get_the_title($id);
    } elseif (is_category()) {
        $term = get_queried_object();
        foreach (array_reverse(get_ancestors($term->term_id, 'category', 'taxonomy')) as $tid) {
            $t = get_term($tid, 'category'); $url = get_term_link($tid, 'category');
            if ($t && !is_wp_error($t) && !is_wp_error($url)) $items[] = [$url, $t->name];
        }
        $label = single_cat_title('', false);
    } elseif (is_search()) {
        $label = '検索: ' . get_search_query(false);
    } elseif (is_404()) {
        $label = 'ページが見つかりません';
    } elseif (is_home()) {
        $label = '投稿一覧';
    } else {
        $label = wp_strip_all_tags(get_the_archive_title());
    }
    echo '<nav aria-label="パンくず"><ol class="breadcrumb">';
    foreach ($items as [$url, $text]) echo '<li><a href="' . esc_url($url) . '">' . esc_html($text) . '</a></li>';
    echo '<li aria-current="page">' . esc_html($label) . '</li></ol></nav>';
}

add_action('wp_enqueue_scripts', function () {
    $file = get_stylesheet_directory() . '/style.css';
    $version = is_file($file) ? (string) filemtime($file) : wp_get_theme()->get('Version');
    wp_enqueue_style('waza-theme', get_stylesheet_uri(), [], $version);
});