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

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

関連記事

ダウンロード

簡単にファイルをダウンロードできるWordPressプラグイン

  WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …

ワードプレス

All in One SEO Packで XMLサイトマップをGoogleに 送信する方法

  ワードプレスのプラグインで超有名な『All in One SEO Pack』ですが、必ず入れたいプラグインの1つです。 その名前の通り、SEO関係の機能が一つにまとまっているので、かなり …

masonry column

MasonryをやめてCSSのcolumnにした

  不具合連続のMasonry   2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、 主な不具合は、 ・画像と画像が重なる ・ブラウザを縮小したり …

メンバー紹介選手紹介

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

  1.プラグインAdvanced Custom Fieldsをインストール   左メニューのプラグイン→新規追加→検索窓に「Advanced Custom Fields」を入力す …

wordpressプラグイン

WordPressプラグインおすすめ10選【2017年度】

  1.セキュリティー Akismet Anti-Spam 自動的にすべてのコメントをチェックし、スパムのように見えるものをフィルターします。   2.バックアップと復元 Updr …