WordPressの既存テーマで子テーマを作る

Standard

子テーマのフォルダーを作成
親テーマ(既存のテーマ)と同じ階層である[/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(); ?> -->

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.