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

今回は、ルクセリタスオリジナルウィジェット「新着記事」のカスタマイズについてです。
ルクセリタスの「新着記事ウィジェット」のデザインは、デフォルトで以下のような感じです。
少しスッキリ、コンパクトにして、好みのデザインに変えてみました。
カスタマイズ内容
- サムネイルサイズ変更
- リンクホバー色を自サイトのテーマカラーに合わせて変更
- 記事抜粋の非表示
- 投稿日を表示
バージョンと初期デザインについて
当サイトで使用中のバージョンは以下です。(記事作成時)
Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.9
ウィジェット表示
「外観」→「ウィジェット」から
表示する記事の数を指定し、サムネイル表示にします。
※サムネイル非表示 にチェックしない
カスタマイズ方法
CSS追記での変更
子テーマのスタイルシートにCSSを追記します。
「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。(Ver.3.7.9以前は「style.cssタブ」)
#thk-new .term img,
#thk-new .term amp-img {
width: 80px;
height: 80px;
}
.new-title a{
color:#616161;
}
.new-title a:hover{
color:#fb8a8a;
}
#thk-new .term img,
#thk-new .term amp-img a:hover{
border-color: #999999;
}
参考:デフォルトCSSは以下です。
wp-contentthemesluxeritasstyles内「widget-new-post.css」
コードを表示
/* 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;
}
以上で、リンク色やサムネイルサイズ・枠線等のカスタマイズは終了です。
以下はPHPファイルを編集するのでご注意下さい。
PHP追記での変更
widget.phpからコードコピー
以下のディレクトリ(親テーマ)にある「widget.php」の内容から新着記事ウィジェットのコード部分をコピーして編集していきます。
widget.phpの191行目~「新着記事」用のコードがあります。
※行数はバージョンによって変わる可能性あり
コピーするコード部分(新着記事ウィジェットコード)を一応、置いておきます。
コードを表示
/*---------------------------------------------------------------------------
* 新着記事 (THK オリジナル)
*---------------------------------------------------------------------------*/
if( class_exists( 'thk_recent_posts' ) === false ):
class thk_recent_posts extends WP_Widget {
public function __construct() {
$widget_ops = array( 'classname' => 'thk_recent_posts', 'description' => __( 'Recent posts', 'luxeritas' ) );
parent::__construct( 'thk_recent_posts', '#4 ' . __( 'Recent posts', 'luxeritas' ) . ' (' . __( 'by Luxeritas', 'luxeritas' ) . ')', $widget_ops );
}
public function widget( $args, $instance ) {
$title = !empty( $instance['title'] ) ? $instance['title'] : '';
$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
$number = !empty( $instance['number'] ) ? absint( $instance['number'] ) : 5;
if( empty( $number ) ) $number = 5;
$thumbnail = isset( $instance['thumbnail'] ) ? $instance['thumbnail'] : 0;
echo $args['before_widget'];
if( !empty( $title ) ) echo $args['before_title'], $title, $args['after_title'];
?>
<div id="thk-new">
<?php
$arr = array( 'posts_per_page' => $number );
$st_query = new WP_Query( $arr );
if( $st_query->have_posts() === true ) {
global $luxe, $post;
$wp_upload_dir = wp_upload_dir();
while( $st_query->have_posts() === true ) {
$st_query->the_post();
?>
<div class="toc clearfix">
<?php if( empty( $thumbnail ) ): ?>
<div class="term"><a href="<?php the_permalink() ?>" aria-hidden="true"><?php
$attachment_id = false;
$post_thumbnail = has_post_thumbnail();
if( $post_thumbnail === false && isset( $luxe['no_img'] ) ) {
$attachment_id = thk_get_image_id_from_url( $luxe['no_img'] );
if( $attachment_id !== false ) $post_thumbnail = true;
}
if( $post_thumbnail === true ) {
$thumb = 'thumb100';
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src( $image_id, $thumb );
if( isset( $image_url[0] ) ) {
$image_path = str_replace( $wp_upload_dir['baseurl'], $wp_upload_dir['basedir'], $image_url[0] );
if( file_exists( $image_path ) === false ) {
$thumb = 'thumbnail';
}
}
else {
$thumb = 'thumbnail';
}
if( $attachment_id !== false ) {
//echo wp_get_attachment_image( $attachment_id );
//$src = preg_replace( '/srcset=.+?sizes/', 'sizes', wp_get_attachment_image( $attachment_id ) );
$src = wp_get_attachment_image( $attachment_id );
}
else {
//the_post_thumbnail( $thumb );
//$src = preg_replace( '/srcset=.+?sizes/', 'sizes', get_the_post_thumbnail( $post->ID, $thumb ) );
$src = get_the_post_thumbnail( $post->ID, $thumb );
}
$src = preg_replace( array("/( data-srcset| srcset| sizes)=["']{1}((?:.|[^"])*)["']{1}/i"), '', $src );
echo $src;
}
else {
?><img src="<?php echo get_template_directory_uri(); ?>/images/no-img-100x100.png" alt="No Image" title="No Image" width="100" height="100" /><?php
}
?></a>
</div>
<?php endif; ?>
<div class="excerpt"<?php if( !empty( $thumbnail ) ) echo ' style="padding:0 10px"'; ?>>
<p class="new-title"><a href="<?php the_permalink(); ?>" aria-label="<?php echo __( 'Recent posts', 'luxeritas' ); ?>"><?php the_title(); ?></a></p>
<p><?php
echo apply_filters( 'thk_excerpt_no_break', 40 );
?></p>
</div>
</div>
<?php
}
}
else {
?>
<p><?php echo __( 'No new posts', 'luxeritas' ); ?></p>
<?php
}
wp_reset_postdata();
?>
</div>
<?php
echo $args['after_widget'];
}
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
$instance['number'] = absint( $new_instance['number'] );
$instance['thumbnail'] = $new_instance['thumbnail'];
return $instance;
}
public function form( $instance ) {
$title = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : __( 'Recent posts', 'luxeritas' );
$number = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
$thumbnail = isset( $instance['thumbnail'] ) ? $instance['thumbnail'] : 0;
?>
<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo __( 'Title:', 'luxeritas' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /></p>
<p><label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php echo __( 'Number of posts to show:', 'luxeritas' ); ?></label>
<input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
<p><input class="checkbox" id="<?php echo $this->get_field_id( 'thumbnail' ); ?>" name="<?php echo $this->get_field_name( 'thumbnail' ); ?>" type="checkbox" value="1" <?php checked( $thumbnail, 1 ); ?> />
<label for="<?php echo $this->get_field_id( 'thumbnail' ); ?>"><?php echo __( 'No Thumbnail', 'luxeritas' ); ?></label></p>
<?php
}
}
endif;
子テーマのfunction.phpへ貼付け
function.phpファイルは最悪ワードプレスが動かなくなる可能性のある重要ファイルですので、バックアップを用意して下さい。
function.phpを触らずにPHPコードを処理単位で記述・管理できるプラグインもあります。
詳しくは以下をご覧ください。
コード編集
※行数で説明がわかりやすいように、コピーしたコードをテキストに貼り付けましたので画面はテキストエディタですが、実際は、子テーマの「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> <span class="postList_date"><?php echo get_the_date(); ?></span></p>
具体的には、記事タイトルの後に、投稿日を表示する以下の記述を追記しています。
<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;
}
カラー変更は以下もご利用下さい。
マカロンビビッドパステル伝統色和色セーフ色名赤桃青紫黄橙緑茶黒配色パターンサンプル
ルクセリタスのその他カスタマイズは以下もご覧ください。
ディスカッション
コメント一覧
まだ、コメントがありません