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

2019-05-09カスタマイズ

今回は、ルクセリタスオリジナルウィジェット「新着記事」のカスタマイズについてです。

ルクセリタスの「新着記事ウィジェット」のデザインは、デフォルトで以下のような感じです。

6851_09

 

少しスッキリ、コンパクトにして、好みのデザインに変えてみました。

カスタマイズ内容

  • サムネイルサイズ変更
  • リンクホバー色を自サイトのテーマカラーに合わせて変更
  • 記事抜粋の非表示
  • 投稿日を表示

6851_04

 

リンク色の変更や、サムネイルサイズ変更はCSSのみで可能ですが、記事抜粋の非表示と投稿日の表示は、PHPを編集します。

 

 

バージョンと初期デザインについて

 

当サイトで使用中のバージョンは以下です。(記事作成時)

Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.9

ダウンロードはこちら

 

ウィジェット表示

「外観」→「ウィジェット」から

 #4 新着記事(Luxeritasオリジナル)を追加して表示

6851_02

 

表示する記事の数を指定し、サムネイル表示にします。

※サムネイル表示 にチェックしない

6851_10

 

カスタマイズ方法

CSS追記での変更

子テーマのスタイルシートにCSSを追記します。

child_style01 child_style02

#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-content\themes\luxeritas\styles内「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」の内容から新着記事ウィジェットのコード部分をコピーして編集していきます。

\wp-content\themes\luxeritas\inc

 

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

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

6851_06

191~314行目の「endif;」までをコピーします。

6851_07

 

コピーするコード部分(新着記事ウィジェットコード)を一応、置いておきます。

コードを表示
/*---------------------------------------------------------------------------
* 新着記事 (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コードを処理単位で記述・管理できるプラグインもあります。
詳しくは以下をご覧ください。

 

 

6851_08

 

 コピーしたコードを最後に追記する形で貼り付けます。

 

コード編集

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

 

記事抜粋を非表示にする

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

6851_05

<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>

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

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

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

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

 

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

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

 

カラー変更は以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名 配色パターンサンプル

 

ルクセリタスのその他カスタマイズは以下もご覧ください。