WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②

 

4.まずは、function.phpに追加

テーマによっては、変更しなくてもきれいに表示されることもあります。

※function.phpに追加する前に、念のためfunction.phpの中身をどこかに保存しておいてください。

左メニューの【外観】→【テーマの編集】から「function.php」を探してクリックしてください。

開いたら、一番下まで行って、下記の部分をコピーして貼り付けてください。

先に説明しますと、アイキャッチ画像のサイズを変更しています。

メンバー個人のページでは、300px×350pxの画像

メンバー一覧のページでは、200px×250pxの画像にしますよーってことです。

貼り付ける場所は、いっぱい英語が書かれているのが終わったところで、改行して貼り付けます。

 

ファイルを更新ボタンをクリックして保存します。

 

5.元からある「single.php」の一部をカスタマイズ

Twenty Sixteen: 個別投稿 (single.php）

single.phpの中身の上から１０数行目あたりにある下記のコードを見つけてください。

<?php
// Start the loop.
while ( have_posts() ) : the_post();
// Include the single post content template.
get_template_part( 'template-parts/content', 'single' );

↓

下記の様に変更

<?php
// Start the loop.
while ( have_posts() ) : the_post();
// Include the single post content template.
if( is_singular( 'member' ) ){
get_template_part( 'template-parts/content', 'member' );
}
else{
get_template_part( 'template-parts/content', 'single' );
}

※変更箇所を赤字にしています。

これは、カスタム投稿の「member」について書かれた投稿記事は、「content-member.php」を使います。

それ以外の投稿は、「content-single.php」を使います。っていう指令です。

 

6.作成した「content-member.php」の一部をカスタマイズ

Twenty Sixteen: content-member.php (template-parts/content-member.php）

content-member.phpの中身の上から１０数行目あたりにある下記のコードを見つけてください。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<?php twentysixteen_post_thumbnail(); ?>

↓

下記の様に変更

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<?php the_post_thumbnail('content-member'); ?>

 

※変更箇所を赤字にしています。

これは、アイキャッチ画像のサイズを4.で「function.php」に追加した(‘content-member’)サイズにしますよーってことです。

 

7.作成した「archive.php」の一部をカスタマイズ

Twenty Sixteen: アーカイブ (archive.php）

archive.phpの中身の上から3０数行目あたりにある下記のコードを見つけてください。

<?php
// Start the Loop.
while ( have_posts() ) : the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );
// End the loop.

↓

下記の様に変更

<?php
// Start the Loop.
while ( have_posts() ) : the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
if( is_post_type_archive('member') ){
get_template_part( 'template-parts/content', 'memberlist' );
}
else{get_template_part( 'template-parts/content', get_post_format() );
}
// End the loop.

 

※変更箇所を赤字にしています。

これは、カスタム投稿の「メンバー登録」のところで登録したメンバー一覧表示は、「content-memberlist.php」を使います。

それ以外の一覧表示は、「content.php」を使います。っていう指令です。

 

8.作成した「content-memberlist.php」の一部をカスタマイズ

Twenty Sixteen: content-memberlist.php (template-parts/content-memberlist.php)

content-memberlist.phpの中身の上から１０数行目あたりにある下記のコードを見つけてください。

<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
</header><!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<?php twentysixteen_post_thumbnail(); ?>
<div class="entry-content">

↓

下記の様に変更

<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
</header><!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<?php the_post_thumbnail('member'); ?>
<div class="entry-content">

 

※変更箇所を赤字にしています。

これは、アイキャッチ画像のサイズを4.で「function.php」に追加した(‘member’)というサイズにしますよーってことです。

 

これで、私がやりたかったメンバー登録の個人個人を表示するページとメンバー一覧表示のページが専用のテンプレートとして作成されました。

条件分岐を使ったやり方やもっと簡単な方法が他にもあるかもしれませんが、私なりに作ってみましたので間違っていればスミマセン 😥

 

次は、

メンバーを登録していきます。

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③