Luxeritasルクセリタスの新着記事ウィジェットをカスタマイズ

/* Widget New Post */
#thk-new {
margin: -10px 0 0 0;
}
#thk-new .term img,
#thk-new .term amp-img {
margin: 0 10px 0 0;
padding: 1px;
width: 100px;
height: 100px;
}
#thk-new .excerpt p {
margin: 0;
padding: 0;
font-size: 12px; font-size: 1.2rem;
line-height: 1.4;
}
#thk-new p.new-title {
font-size: 14px; font-size: 1.4rem;
font-weight: bold;
line-height: 1.4;
padding: 0;
margin: 0 0 14px 0;
text-decoration: none;
}
#thk-new .toc {
padding: 15px 0;
border-bottom: 1px dotted #ccc;
}
#thk-new .toc:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-style: none;
}

widget.phpからコードコピー

以下のディレクトリ（親テーマ）にある「widget.php」の内容から新着記事ウィジェットのコード部分をコピーして編集していきます。

widget.phpの191行目～「新着記事」用のコードがあります。

※行数はバージョンによって変わる可能性あり

子テーマのfunction.phpへ貼付け

function.phpファイルは最悪ワードプレスが動かなくなる可能性のある重要ファイルですので、バックアップを用意して下さい。

function.phpを触らずにPHPコードを処理単位で記述・管理できるプラグインもあります。
詳しくは以下をご覧ください。

function.phpを直接触らず、いざという時はセーフモードもあるプラグイン

function.phpを直接編集するカスタマイズの際は、注意しないとワードプレス自体が動かなくなってしまう事があります。 当然、バックアップをとっておいたり、注意深く編集はしますが「万一」の場合のドキドキはありますよね。 そこで今回は、f...

ayaito.net

2019.09.19

コード編集

※行数で説明がわかりやすいように、コピーしたコードをテキストに貼り付けましたので画面はテキストエディタですが、実際は、子テーマの「function.php」編集画面で行って下さい。

記事抜粋を非表示にする

コピーしたコードの81～83行面が、記事抜粋の表示を指示している部分になります。

<p><?php
echo apply_filters( 'thk_excerpt_no_break', 40 );
?></p>

投稿日を表示する

上記で削除したコードの上の行を編集します。

変更前のコード

<p class="new-title"><a href="<?php the_permalink(); ?>" aria-label="<?php echo __( 'Recent posts', 'luxeritas' ); ?>"><?php the_title(); ?></a></p>

編集後のコード

<p class="new-title"><a href="<?php the_permalink(); ?>" aria-label="<?php echo __( 'Recent posts', 'luxeritas' ); ?>"><?php the_title(); ?></a>&nbsp;&nbsp;<span class="postList_date"><?php echo get_the_date(); ?></span></p>

具体的には、記事タイトルの後に、投稿日を表示する以下の記述を追記しています。

&nbsp;&nbsp;<span class="postList_date"><?php echo get_the_date(); ?></span>

タイトルとの余白を空ける為「  」を記述していますが、改行したい場合は上記の行は触らず

その下に以下を追記でもOKです。

<span class="postList_date"><?php echo get_the_date(); ?></span>

改行の場合は、spanタグ　でなく　pタグでもお好みで。

上記コードで指定した投稿日用のクラス「postList_date」は、CSSで定義します。

.postList_date{
color:#de6596;
font-size: 12px;
}