ブログのトップページに記事全文を表示させないようにテンプレートを編集する方法
WordPressのテーマについて
WordPressには「テーマ」と呼ばれるデザインのテンプレートがあり、公式・非公式含め無数のテーマが公開されています。
詳しい話は省きますが、WordPressのテーマはGPLライセンスとなっており、自由に使用・改変・再配布が認められています。
ちなみに、著作権表示は無しでいい、というわけではなく、ページ上に見えるように表示しなくてもいい、となっているようです。cssファイルなどのソース上に表記されていればOK、ということですね。
とはいえ、中には作者の意向で「変更しないでほしい」「見えるところに表記されている著作権表示を消さないでほしい」とお願いされているテーマもあります。
さらにいうと、cssファイルや画像ファイルはGPLライセンスにしなくても良いみたいです。
誰かが作ってくれたテーマを編集する場合は、著作権のことを意識しておくといいかもしれません。
記事全文を非表示にする
今回は、アイキャッチ画像と記事タイトルのみを一覧に表示させて、記事詳細ページへのリンクを設置する形にしようと思います。
文章の一部を表示して続きを読むリンクを設置、という方法ではないのでご注意ください。
このブログで現在使用しているテーマ『Twenty Fifteen』を編集していきます。
※phpファイルやcssファイルを編集するので、表示が崩れてしまったり、エラーで動かなくなってしまう可能性があります。本番のデータをいきなり編集するのはやめた方がいいと思います。また、バックアップを取ってから編集することをおすすめします。
index.php の編集
WordPressのダッシュボードから編集する場合は「 外観 ＞ テーマエディター 」から、
「 テーマファイル ＞ メインインデックスのテンプレート (index.php) 」を編集します。
初めてアクセスした場合、「注意！」とポップアップが表示されると思いますが、「理解しました」で閉じます。
エディタで変更する場合、パスは下記です。
/public/wp-content/themes/twentyfifteen/index.php
「twentyfifteen」は現在有効化しているテーマのフォルダになります。
40行目の get_template_part( 'content', get_post_format() ); が、記事詳細ページに表示されるコンテンツ(サムネイル、タイトル、記事全文など)を表示している関数になります。
それを削除して、リンク、サムネイル、タイトルを個別に入れていきます。
記事詳細ページのURLが <?php the_permalink(); ?> 、サムネイルを表示する関数が <?php the_post_thumbnail(); ?> 、記事タイトルを表示する関数は<?php the_title(); ?> になります。
一例として、こんな感じに編集してみました。
<!--?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* e.g., it puts together the home page when no home.php file exists.
*
* Learn more: {@link https://developer.wordpress.org/themes/basics/template-hierarchy/}
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/
get_header(); ?-->
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<!--?php if ( have_posts() ) : ?-->
<!--?php if ( is_home() && ! is_front_page() ) : ?-->
<header>
<h1 class="page-title screen-reader-text"><!--?php single_post_title(); ?--></h1>
</header>
<!--?php endif; ?-->
<div class="post-link-list-wrapper">
<ul class="post-link-list">
<!--?php while ( have_posts() ) : ?-->
<!--?php the_post(); ?-->
<li>
<a class="post-link" href="<?php the_permalink(); ?>">
<div class="post-link-inner">
<div class="post-link-thumbnail">
<!--?php the_post_thumbnail(); ?-->
</div>
<p class="post-link-text"><!--?php the_title(); ?--></p>
</div>
</a>
</li>
<!--?php endwhile; ?-->
</ul>
</div>
<!--?php
// Previous/next page navigation.
the_posts_pagination(
array(
'prev_text' =--> __( 'Previous page', 'twentyfifteen' ),
'next_text' => __( 'Next page', 'twentyfifteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
)
);
?>
<!--?php else : ?-->
<!--?php
// If no content, include the "No posts found" template.
get_template_part( 'content', 'none' );
?-->
<!--?php endif; ?-->
</main><!-- .site-main -->
</div><!-- .content-area -->
<!--?php get_footer(); ?-->これで全文などの情報が排除され、サムネイルと記事タイトルのみになりました。
しかしこれだけでは表示がぐちゃぐちゃなのでcssを編集します。
style.css に追記
「 テーマファイル ＞ スタイルシート (style.css) 」を編集します。
エディタで変更する場合、パスは下記です。
/public/wp-content/themes/twentyfifteen/style.css
ルールに則ると、「12.1 Posts and pages」あたりに入れると良さそうなので、1620行目あたりに下記を追記しました。
.post-link-list-wrapper {
padding: 0 20px;
}
.post-link-list {
display: flex;
flex-wrap: wrap;
}
.post-link-list li {
list-style-type: none;
width: calc(33.3% - 10px);
margin-bottom: 15px;
}
.post-link-list li:not(:nth-child(3n)) {
margin-right: 15px;
}
.post-link-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.post-link {
display: block;
height: 100%;
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}
.post-link-thumbnail {
flex: 1;
background: #ccc;
}
.post-link-text {
margin-bottom: 0;
padding: 10px;
}これで記事一覧ができました。
スマホの配慮も含めて、もうちょっと表示は改良が必要そうです。