【WordPress】Luxeritasのデザインテーマ（musica in maris）で固定ページに任意の固定ページ一覧を表示する

2022年6月10日Wordpress

おはようございます。

大分ニッチなネタですが、応用は出来るので兼備忘として。

このブログでも利用させていただいている Luxeritas テーマでは、

デザインファイルを使って見た目を色々変えられるという素晴らしい機能があります。

今回は次の２つのことをやってみました。

やったことメモ１．固定ページに任意の固定ページ一覧を表示する
２．デザインにあわせてスタイルを調整

標準の機能では１を実現する方法がちょっと見当たらなかったので、ショートコードを作ってみました。

1. 見た目
2. ショートコード
3. CSS
4. まとめ

見た目

ちょっと分かりにくいかもしれませんが、「musica in maris」デザインに合わせた感じで、

アイキャッチ・タイトル・作成日・本文（抜粋）・記事を読むボタンという枠で一覧が表示されます。

ショートコード

function.php

/* 固定記事リスト */
function getArchivePost($atts) {
	global $post;
	$oldpost = $post;
	extract(shortcode_atts(array(
			"ids" => ''
	), $atts));
	
	$args = array(
		'post_type' => array('post','page'),
		'include' => $ids,
		'order' => 'ASC'
	);
	$myposts = get_posts($args);
	$retHtml='';
	
	if ($ids=='') {
		$retHtml='表示する記事がありません。<BR>メニューから記事をお探しください。';
	} else {
	
		foreach($myposts as $post) :
			setup_postdata($post);
			$retHtml.='<div class="l-wrapper card-radius">';
			$retHtml.='<article class="card">';
			$retHtml.='<div class="card__header">';
			$retHtml.='<figure class="card__thumbnail">';
			if ( has_post_thumbnail( $post->ID ) ) {
				$retHtml.='<a href="'.get_permalink().'"><img src="'.get_the_post_thumbnail_url( $post->ID, 'large' ).'" class="card__image"/></img></a>';
			} else {
				$retHtml.='<a href="'.get_permalink().'"><img src="" class="card__image"/></img></a>';
			}
			$retHtml.='</figure>';
			$retHtml.='<p class="meta"><i class="material-icons"></i><span class="date">' . get_post_time( get_option( 'date_format' )) . '</span></p>';
			$retHtml.='<a href="'.get_permalink().'"><p class="card__title">' . the_title("","",false) . '</p></a>';
			$retHtml.='</div>';
			
			$retHtml.='<div class="card__body"><p class="card__text2">';
			if ( mb_strlen(strip_tags($post-> post_content)) > 140) {
				$retHtml.=mb_substr(strip_tags($post-> post_content),0,140).'...';
			} else {
				$retHtml.=strip_tags($post-> post_content);
			}
			$retHtml.='</div>';
			$retHtml.='<p class="read-more"><a href="'.get_permalink().'" class="read-more-link" aria-label="記事を読む" itemprop="url">記事を読む</a></p>';
			$retHtml.='</article></div>';
			
		endforeach;
		$retHtml.='</ul>';
	
	}
	
	$post = $oldpost;
	wp_reset_postdata();
	return $retHtml;
}
add_shortcode("archivehtml", "getArchivePost");

/* 固定記事リスト */

functiongetArchivePost($atts){

global$post;

$oldpost=$post;

extract(shortcode_atts(array(

"ids"=>''

),$atts));

$args=array(

'post_type'=>array('post','page'),

'include'=>$ids,

'order'=>'ASC'

);

$myposts=get_posts($args);

$retHtml='';

if($ids==''){

$retHtml='表示する記事がありません。<BR>メニューから記事をお探しください。';

}else{

foreach($mypostsas$post):

setup_postdata($post);

$retHtml.='<div class="l-wrapper card-radius">';

$retHtml.='<article class="card">';

$retHtml.='<div class="card__header">';

$retHtml.='<figure class="card__thumbnail">';

if(has_post_thumbnail($post->ID)){

$retHtml.='<a href="'.get_permalink().'"><img src="'.get_the_post_thumbnail_url($post->ID,'large').'" class="card__image"/></img></a>';

}else{

$retHtml.='<a href="'.get_permalink().'"><img src="" class="card__image"/></img></a>';

}

$retHtml.='</figure>';

$retHtml.='<p class="meta"><i class="material-icons"></i><span class="date">'.get_post_time(get_option('date_format')).'</span></p>';

$retHtml.='<a href="'.get_permalink().'"><p class="card__title">'.the_title("","",false).'</p></a>';

$retHtml.='</div>';

$retHtml.='<div class="card__body"><p class="card__text2">';

if(mb_strlen(strip_tags($post->post_content))>140){

$retHtml.=mb_substr(strip_tags($post->post_content),0,140).'...';

}else{

$retHtml.=strip_tags($post->post_content);

}

$retHtml.='</div>';

$retHtml.='<p class="read-more"><a href="'.get_permalink().'" class="read-more-link" aria-label="記事を読む" itemprop="url">記事を読む</a></p>';

$retHtml.='</article></div>';

endforeach;

$retHtml.='</ul>';

}

$post=$oldpost;

wp_reset_postdata();

return$retHtml;

}

add_shortcode("archivehtml","getArchivePost");

タイトルでは固定ページの一覧としましたが、実際には固定ページ（page）または投稿ページ（post）という指定にしています。

ショートコードの引数で、表示したい投稿、固定ページのIDを渡してあげれば一覧で表示できます。

CSS

style.css

.l-wrapper {
  margin: 1rem auto;
  width: 100%;
}
.card-radius{
  overflow: hidden;
  border: 1px solid #a0d8ef;
}

.card {
  background-color: #fff;
  box-shadow: 0 0 0px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;
}

.card__header {
  display: flex;
  flex-wrap: wrap;
}
.card__header > p.meta {
	width: 100%;
	margin: 0px 10px;;
	padding: 0px 5px;
	border-top: 0px;
	order: 2;
}
.card__header > a {
  text-decoration: none;
}
.card__header > figure {
	border-bottom: 1px solid #a0d8ef;
}
.post p.card__title {
  padding: 1rem 1.5rem 0;
  font-size: 1.8rem;
  order: 1;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 0px;
  margin: 0px;
  color: #24134e;

}
.post p.card__title:hover {
	color: #dc143c;
}
.card__thumbnail {
  margin: 0;
  order: 0;
  overflow: hidden;
  width: 100%;
}

.card__image {
  width: 100%;
}

.card__body {
  padding: 0 1.5rem;
}

.card__text {
  font-size: .8rem;
  text-align:center;
  text-decoration: none;
}

.card__text2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.l-wrapper:hover img {
  display: block;
  -webkit-transform: scale(1.05,1.05);
  transform: scale(1.05,1.05);
  transition: all .4s;
}

.l-wrapper img {
  display: block;
  -webkit-transform: scale(1.00,1.00);
  transform: scale(1.00,1.00);
  transition: all .4s;
}

.l-wrapper .read-more {
	float: right;
	margin: 10px;
	font-size: 1.4rem;
}

.home .grid {
	border: none;
	margin: -10px 15px 0 5px;
	padding: 0;
}

.l-wrapper {

margin:1remauto;

width:100%;

}

.card-radius{

overflow:hidden;

border:1pxsolid#a0d8ef;

}

.card {

background-color:#fff;

box-shadow:000pxrgba(0,0,0,.16);

color:#212121;

text-decoration:none;

}

.card__header {

display:flex;

flex-wrap:wrap;

}

.card__header > p.meta {

width:100%;

margin:0px10px;;

padding:0px5px;

border-top:0px;

order:2;

}

.card__header > a {

text-decoration:none;

}

.card__header > figure {

border-bottom:1pxsolid#a0d8ef;

}

.post p.card__title {

padding:1rem1.5rem0;

font-size:1.8rem;

order:1;

font-weight:700;

text-decoration:none;

border-bottom:0px;

margin:0px;

color:#24134e;

}

.post p.card__title:hover {

color:#dc143c;

}

.card__thumbnail {

margin:0;

order:0;

overflow:hidden;

width:100%;

}

.card__image {

width:100%;

}

.card__body {

padding:01.5rem;

}

.card__text {

font-size:.8rem;

text-align:center;

text-decoration:none;

}

.card__text2 {

margin-top:0;

margin-bottom:1.5rem;

}

.l-wrapper:hover img {

display:block;

-webkit-transform:scale(1.05,1.05);

transform:scale(1.05,1.05);

transition:all.4s;

}

.l-wrapper img {

display:block;

-webkit-transform:scale(1.00,1.00);

transform:scale(1.00,1.00);

transition:all.4s;

}

.l-wrapper .read-more {

float:right;

margin:10px;

font-size:1.4rem;

}

.home .grid {

border:none;

margin:-10px15px05px;

padding:0;

}

まとめ

一般的にはトップページには最新の記事なんかを表示するだろうし、投稿ページであれば先頭に固定する機能もあるのですが、

トップページを固定ページにして、更に任意の固定ページを表示したいという要望があったためやってみた次第です。

何かのお役に立てば。

ではでは。

2022年6月10日WordpressLuxeritas,WordPress,WordPressテーマ

Posted by doradora