SEOに強く、アフィリエイトにも強いと評判のENJIさん作のWordPressの無料テンプレートAFFINGERですが、あまりの評判に使っている人が多くて、どのサイトも同じように見えます。そこで、今回はタイトル下の投稿日・更新日を非表示にして、タイトル下のボックスの表示を変更する方法をご紹介します。
今回のカスタマイズは『投稿タイトル下の投稿日・更新日を非表示にする』です。
注意事項
テーマファイルを改変しますので、失敗するとサイトが表示されなくなる可能性があります。
失敗してもすぐに戻せるように、必ずファイルのバックアップを取っておきましょう。
▼バックアップに必要なファイル
- single.php
- style.css
環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。
▼この記事の環境
- WordPress 4.5.1-ja
- STINGER 5
- Google Chrom
※追記：AFFINGERは有料になり、無料ダウンロードは終了したようです。
AFFINGER PACK3（WING対応）
投稿日・更新日のソース確認
投稿記事のソースを確認すると、タイトル下の下記ソースで表示されていることがわかります。
<p><span class="kdate"><i class="fa fa-calendar"></i>
<time class="entry-date" datetime="2014-05-13T10:22:13+09:00">
2014/05/13 </time>
<i class="fa fa-repeat"></i> 2014/11/03 </span></p>
WordPressの管理画面で［外観］→［テーマの編集］→［単一記事の投稿（single.php）］の順に進み、単一記事の投稿編集画面を開いて変更します。
このソースを編集します。
<p><span class="kdate"><i class="fa fa-calendar"></i>
<time class="entry-date" datetime="<?php the_time(DATE_W3C); ?>">
<?php the_time( 'Y/m/d' ); ?>
</time>
<?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) {
echo ' <i class="fa fa-repeat"></i> ', $mtime;
} ?>
</span></p>
投稿日・更新日の非表示
今後、一切使用しない場合は、ソースを削除して非表示にします。
ひょっとしてまた使うかもしれない...という場合はコメントアウトで非表示にしましょう。
コメントアウトで非表示にする
↓これの上を改行して
<p><span class="kdate"><i class="fa fa-calendar"></i>
↓これを記入。
<!--日付のコメントアウト
↓これの下を改行して
</span></p>
↓これを記入。
日付のコメントアウト-->
［ファイルを更新］をクリックして保存。
↓こんな風になればOKです。
<!--日付のコメントアウト
<p><span class="kdate"><i class="fa fa-calendar"></i>
<time class="entry-date" datetime="<?php the_time(DATE_W3C); ?>">
<?php the_time( 'Y/m/d' ); ?>
</time>
<?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) {
echo ' <i class="fa fa-repeat"></i> ', $mtime;
} ?>
</span></p>
日付のコメントアウト-->
ソースを削除して非表示にする
↓このソースをまるまる削除します。
選択したソースを削除して［ファイルを更新］をクリックして保存。
コメントアウトでもソース削除でも、
↓このように表示されます。
レイアウト変更
非表示にした後が物悲しい...そんな場合は、CSSで調整しましょう。
WordPress管理画面で
［外観］→［テーマの編集］の順にクリック。
［スタイルシート（style.css）］を開きます。
クラス「.blogbox］が該当するCSSです。
.blogbox {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #666666;
margin-bottom: 20px;
padding: 5px;
「border-top-style: solid;」がボックスの上線「border-bottom-style: dotted;」が下線で、値の「solid」が実線、「dotted」が点線の表示です。
今回は、下線を実践にして、背景色を上下の線と同じ色にします。
↓こんな風に修正して［ファイルを更新］をクリック。
.blogbox {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
margin-bottom: 20px;
padding: 5px;
background-color: #666666;
}
シャキッとしましたね。
このソースをいじくれば色んな表示ができます。
参考にしてください。