wordpress

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

投稿日:2017年9月8日 更新日:

 

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

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

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

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

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

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

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

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

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

//アイキャッチサムネイル生成 メンバー写真
add_theme_support(‘post-thumbnails’);
add_image_size(‘content-member’,300,350,true);
add_image_size(‘member’,200,250,true);

 

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

 

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

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

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

<?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の中身の上から10数行目あたりにある下記のコードを見つけてください。

<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の中身の上から30数行目あたりにある下記のコードを見つけてください。

<?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の中身の上から10数行目あたりにある下記のコードを見つけてください。

<?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でメンバー紹介や選手一覧などを作ってみた③

 

-wordpress
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

記事一覧表示

固定ページにカスタム投稿記事一覧表示

    固定ページにアイキャッチ画像付きの記事一覧を表示させたい   そこで、やりたかった主なことは以下の部分です。   ・いろいろプラグインなどもあるが、プラ …

div横並び

DIV横並びで回り込みも

Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい! そんなことを思ったことがあると思います。(きっと 😛 ) いろんな方法がありますが、簡単にできる方法をご紹 …

vegas使い方

VEGAS BACKGROUND SLIDESHOWの使い方

  VEGAS BACKGROUND SLIDESHOWの使い方   画像だけを利用した基本的な使い方   独自で作成したjsファイルがあるならそちらに以下のコードを記述 …

画像を順番に表示

画像を順番に重ねて表示

  画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。   今回は、WordPressでトップページ(フロントページ)のみ、動きのある画像を表示した …

ポップアップ・ライトボックス風

画像クリックで 違う画像やテキストの入ったBOXを表示させる

  プラグインなしで、別の画像やテキストをlightboxのように表示させる   html   <a class="item-demo"> …