どうもCHASUKEでございます。
WordPressカスタマイズなんかも書いてこうと思います。(備忘も込めて)
これぞ雑多ブログのイイところだw
HTMLやPHP言語は専門ではありませんが、職業柄コードをいじるのは好きです◎
当ページで使用しているのは「Twenty Fourteen」というWordpressテーマです。
このテーマを2014年から使用しているわけですが、タイトル下の表記が気に入らなかったのでカスタマイズいたしました。
カスタム後の
ビフォーアフターはこんな感じ。
◆PC表示
BEFORE
AFTER
◆モバイル表示
BEFOREとAFTER
修正は意外と簡単でした。
では、実際のソースを交えて解説。
目次
カスタマイズしたポイント
タイトル下の表示について、次のとおり変更した。
- 更新日付の追加
- 投稿日・更新日という文字の追加
- 投稿者の削除
- [コメントどうぞ]の削除
なぜカスタマイズしたか
■更新日付の追加について
ブログを読んでいて情報が古い？って思うことがあります。そんなときに更新日が明記してあればすっきりします。何より信頼性が増すます。
■投稿日・更新日という文字の追加
これは見た目だけの問題です。更新日を追加したので、見やすいように表示されるようにしました。
■投稿者と[コメントどうぞ]の削除
投稿者は私(chasuke)しかおりませんw。それにタイトルを見ただけでコメントをしていただけるような神はいませんので削除しました。
コード修正案
今回イジったソースは以下の3つ。
・content.php
・template-tags.php
・style.css
※コード修正を行う場合は、必ず触る前にソースのバックアップをとっていつでももどせるようにしておきましょうね。
『content.php』の修正
このソースでタイトル下の表示を制御してます。つまり表示したくないものは決してやります。
▼[修正前]content.php
<div class="entry-meta"> <?php if ( 'post' == get_post_type() ) twentyfourteen_posted_on(); if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?> <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span> <?php endif; edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-meta -->
上記の箇所をcontent.phpから見つけてください。
8行目で[コメントどうぞ]を表示します。
4行目で投稿日・投稿者を表示します。
ここでは8行目のみコメントアウト(無意味化)します。4行目もコメントアウトしてしまうと、投稿日まで消えてしまうので注意！
▼[修正後]content.php
<div class="entry-meta"> <?php if ( 'post' == get_post_type() ) twentyfourteen_posted_on(); if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?> ?> <!-- 追加カスタマイズ コメントどうぞを削除 <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span> --> <?php endif; edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-meta -->
これで[コメントどうぞ]がタイトル下から消えたはずです。
このファイルはテーマフォルダ内の[inc/template-tags.php]にあります。
このソースは[content.php]の投稿日・投稿者を表示するコードから呼び出され、結果を返します。
つまり、ここをイジって投稿日・更新日を返すように修正します。
▼[修正前]tmplate-tags.php
// Set up and print post meta information. printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span> <span class="byline"><span class="author vcard"><a class="url fn n" href="%4$s" rel="author">%5$s</a></span></span>', esc_url( get_permalink() ), esc_attr( get_the_date( 'c' ) ), esc_html( get_the_date() ), esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), get_the_author() );
▼[修正後]tmplate-tags.php
/* original
// Set up and print post meta information.
printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span> <span class="byline"><span class="author vcard"><a class="url fn n" href="%4$s" rel="author">%5$s</a></span></span>',
esc_url( get_permalink() ),
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
get_the_author()
);
*/
// タイトル下をカスタマイズ
//投稿日
printf( '<span class="entry-date"><a><time class="entry-date" datetime="%1$s">投稿日:%2$s</time></a></span> ',
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() )
);
//更新日
if ( get_the_date() != get_the_modified_date() ) {
printf( '<span class="upd-date"><a><time class="upd-date" datetime="%1$s">更新日:%2$s</time></a></span> ',
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);
}
修正前のコードはコメントアウトして、すぐ下に投稿日と更新日を返すように書き換えています。
ちなみに更新日は投稿日より未来の日付の場合に表示するようになってます^^
『更新日』ではなく『最終更新日』と表示させたい場合もコチラを修正すればOK。
『style.css』の修正
先ほどのtemplate-tags.phpの更新日のところで新しいクラス属性[upd-date]を使用してます。
つまり、クラス属性をstyle.cssに追加する必要があります。
[修正後]style.css
@media screen and (min-width: 401px) {
a.post-thumbnail:hover img {
opacity: 0.85;
}
〜中略〜
.site-content span + .entry-date:before {
content: "";
}
.site-content span + .upd-date:before {
content: "";
}
.attachment span.entry-date:before,
.attachment span.upd-date:before,
.entry-content .edit-link a:before,
.entry-meta .edit-link a:before,
.site-content .byline a:before,
.site-content .comments-link a:before,
.site-content .entry-date a:before,
.site-content .upd-date a:before,
.site-content .featured-post:before,
.site-content .full-size-link a:before,
〜中略〜
.site-content .entry-date a:before,
.attachment .site-content span.entry-date:before {
content: "\f303";
margin-right: 1px;
position: relative;
top: 1px;
}
.site-content .upd-date a:before,
.attachment .site-content span.upd-date:before {
content: "\f420";
margin-right: 1px;
position: relative;
top: 1px;
}
.site-content .byline a:before {
content: "\f304";
}
〜中略〜
}
基本的には投稿日のクラス属性[entry-date]を真似します。
追加する行に色をつけてありますので参考にしてください。(11-13, 22, 36-42行目)
38行目の[content]は更新日の左に表示されるアイコン(f420)を指定してます。Twenty Fourteen ではGenericonsというアイコンフォントが採用されてます。アイコン一覧は以下。
[リンク] Genericonsのアイコン一覧
一覧にある420番のアイコンを更新日の左に付けてます♪
以上でカスタマイズは終わりです。
最後に
ページ更新日があったらいいなぁって前々から思ってたが、やってみたら意外と簡単にできてしまった。
参考になるページを探してみてもTwentyFourteenテーマが古いのか見つからなかったので、需要のある方は参考にしてみてください。
今後も少しずつカスタマイズして個性のあるページ(自己満?)にしていきたいと思っとりますm(_ _)m
