子テーマのフォルダーを作成
親テーマ(既存のテーマ)と同じ階層である[/wp-content/themes]に新しいフォルダーを作成します。
twentynineteen-child/
├── functions.php
├── page-events.php
├── page-mytest.php
├── page.php
├── screenshot.png
├── style.css
└── template-parts
└── page
└── content-events.php |
子テーマフォルダー内に[functions.php]というPHPファイルを作成する
[functions.php]に以下のコードを記述して、子テーマを認識させます。
cat functions.php
<?php //------子テーマの初期化------ function my_theme_enqueue_styles() { $parent_style = 'twentynineteen-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); //------以上------ //------テスト投稿一覧追加------ function create_post_type_mytest(){ //テスト投稿タイプがダッシュボードの編集画面で使用する項目を配列で用意 $supports = array( 'title', 'editor', //'author', //'thumbnail', //'revisions' ); //テスト投稿タイプを追加するための関数 //第一引数は任意のカスタム投稿タイプ名 register_post_type('mytest', array( 'label' => 'テスト投稿', 'public' => true, //フロントエンド上で公開する場合true 'has_archive' => false, //アーカイブページを表示したい場合true 'menu_position' => 4, //メニューを表示させる場所 //'supports' => $supports //ダッシュボードの編集画面で使用する項目 ) ); } add_action('init','create_post_type_mytest'); //------以上------ |
作成した子テーマフォルダー内に[style.css]という名前でCSSファイルを作成する
作成した[style.css]に以下のコードを記述する。
Theme Name : 子テーマの名前(例:Twenty Nineteen Child)
Template : 親テーマのフォルダ名(例:twentynineteen)
cat style.css
/* Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: Ye Author URI: http://yemaosheng.com Template: twentynineteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */ /** * イベントページ */ .event { display: flex; align-items: center; margin: 64px 0; } .event__image { margin-right: 36px; max-width: 120px; } .event__image img { border-radius: 50%; height: auto; max-width: 100%; } .event__content { max-width: 75%; } .event__time { font-style: italic; } .event__link { font-weight: bold; } |
ACF(Advanced Custom Fields)でイベントページを作成する
cat page-events.php
<?php /** * Template Name: Events * * The template for displaying the events calender * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post * * @package WordPress * @subpackage Twenty_Nineteen * @since 1.0.0 */ get_header(); ?> <section id="primary" class="content-area"> <main id="main" class="site-main"> <?php /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/page/content', 'events' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop. ?> </main><!-- #main --> </section><!-- #primary --> <?php get_footer(); |
cat template-parts/page/content-events.php
<?php /** * Template part for displaying page events in page.php * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Nineteen * @since 1.0.0 */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php if ( ! twentynineteen_can_show_post_thumbnail() ) : ?> <header class="entry-header"> <?php get_template_part( 'template-parts/header/entry', 'header' ); ?> </header> <?php endif; ?> <div class="entry-content"> <?php the_content(); ?> <?php // check if the repeater field has rows of data if( have_rows('event') ): // loop through the rows of data while ( have_rows('event') ) : the_row(); if(get_sub_field('event_rsvp_link_or_email') == 'Link') { $rsvp_link = get_sub_field('event_rsvp_link'); }else{ $rsvp_link = 'mailto:'.get_sub_field('event_rsvp_email'); } ?> <article class='event'> <div class='event__image'> <?php $image = get_sub_field('event_image'); if( !empty($image) ): ?> <img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" /> <?php endif; ?> </div> <div class='event__content'> <h2> <?php the_sub_field('event_title'); ?> </h2> <p class='event__time'> <?php the_sub_field('event_date'); ?> at <?php the_sub_field('event_start_time'); ?> <?php if(get_sub_field('event_end_time')) { echo ' until '; the_sub_field('event_end_time'); } ?> </p> <p> <?php the_sub_field('event_desc'); ?> </p> <p> <a class='event__link' href='<?php echo $rsvp_link; ?>'>RSVP</a> </p> </div> </article> <?php endwhile; else : echo '<p>There are currently no events planned.</p>'; endif; ?> <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ), 'after' => '</div>', ) ); ?> </div><!-- .entry-content --> <?php if ( get_edit_post_link() ) : ?> <footer class="entry-footer"> <?php edit_post_link( sprintf( wp_kses( /* translators: %s: Name of current post. Only visible to screen readers */ __( 'Edit <span class="screen-reader-text">%s</span>', 'twentynineteen' ), array( 'span' => array( 'class' => array(), ), ) ), get_the_title() ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-footer --> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> --> |