wordpressテーマ「luxeritas」でヘッダーのサイトロゴ右に重複しないランダム記事一覧を表示する

2019/08/13 22:38


注意:本記事はあくまで脳筋がてきとうにカスタマイズしたものを忘備ついでに初心者に紹介するものであり、うまく動作しなかったとして【J】は何の責任も負いません。

@本記事執筆時点でのluxeritasのバージョンは3.5.12

@ヘッダー部分のサイトロゴの右隣にランダム記事一覧(今回は10件)を表示する記事になるます。

↑ヘッダーのコレだぞ♡

前回、同様の記事を書いたけど実は問題があった。
テストサイトにコードを貼り付けて確認していたのだが、

ん?


!!
・・・オォン。
端的に言えばcssで無理やりタイトル等を歪んだ位置に持ってきたのが原因でこうなっていたようだ。

これではスクロールバー等で右に移動してしまうと...

...ォォン。
当サイト(がらくた)は右側のスペースを最初から使っていたので問題なかったが、「他のサイトでもコピペで使えるよ!」というような感じで記事を書いた以上これはアカン。

で、面倒くさくなったので別の手段を探した。

今回の手順としては、

1,サイトタイトルをサイトロゴの下に移動
2,header.phpにコード書く
3,cssで見た目整える

これで終わり。

作業前に、前回同様luxeritasを使い始めたばかりで子テーマにheader.phpが存在しないって人は、先にFTPソフトを使うなどして親テーマからコピーして子テーマにアップロードしておくんだぞ。

「header.php」の『'<span itemprop="name about">', THK_SITENAME, '</span>'』の直前に以下のコードを追加

'<span class="nanka-sitename-move"></br></span>',

「header.php」の『</div><!--/#head-in-->』と書かれているところの直前に以下のコードを追加

<?php if ( wp_is_mobile() ) : ?>
<?php else: ?>
<?php
//ランダム記事をまとめて取得

//記事・固定ページでは現在の記事は除外(一応)
if( is_singular() ){
$args = array(
'posts_per_page' => 10,
'post__not_in' => array($post->ID),
'orderby' => 'rand',
);
}else{
$args = array(
'posts_per_page' => 10,
'orderby' => 'rand',
);
}
$the_query = new WP_Query($args);

//変数を配列として宣言
//globalしないと他のテンプレで使えない
global $kijidata;
$kijidata = array();

if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();

$thumpass = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');

//取得した記事を変数(配列)に格納
$kijidata[] = array("title" => $post->post_title,"url" => get_permalink($post->ID),"img" => $thumpass[0]);

endwhile;
endif;
wp_reset_postdata();
?>

<div class="top-randomall">
<div class="top-randomw1f">
<div class="top-randomw1">
<?php
//1上
global $kijidata;

$i = 0; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
<div class="top-randomw1a">
<?php
//1下
global $kijidata;

$i = 1; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
</div>
<div class="top-randomw2f">
<div class="top-randomw2">
<?php
//2上
global $kijidata;

$i = 2; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
<div class="top-randomw2a">
<?php
//2下
global $kijidata;

$i = 3; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
</div>
<div class="top-randomw3f">
<div class="top-randomw3">
<?php
//3上
global $kijidata;

$i = 4; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
<div class="top-randomw3a">
<?php
//3下
global $kijidata;

$i = 5; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
</div>
<div class="top-randomw4f">
<div class="top-randomw4">
<?php
//4上
global $kijidata;

$i = 6; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
<div class="top-randomw4a">
<?php
//4下
global $kijidata;

$i = 7; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
</div>
<div class="top-randomw5f">
<div class="top-randomw5">
<?php
//5上
global $kijidata;

$i = 8; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
<div class="top-randomw5a">
<?php
//5下
global $kijidata;

$i = 9; ?>

<a href="<?php echo $kijidata[$i]["url"]; ?>">
<img src="<?php echo $kijidata[$i]["img"]; ?>" alt="" /></a>
<div class="top-randomtitle"><a href="<?php echo $kijidata[$i]["url"]; ?>"><?php echo $kijidata[$i]["title"]; ?></a></div>

<?php ?>
</div>
</div>
</div>
<?php endif; ?>

「style.css」へ以下のコードを追加

@media screen and (max-width: 699px){
.nanka-sitename-move{
display:none;
}
}

.top-randomall img{
width:200px;
height:120px;
border-right: 1px solid #c48d71;
box-shadow: 0px 0px 5px 5px #49332a;
outline: solid 3px #493833;
}
.top-randomall img:hover{
opacity:1.0;
border: 2px solid #0ee20b;
box-shadow: 0px 0px 8px 8px #29ff0c;
outline: solid 3px #a0ff93;
}

.top-randomall{
z-index:42;
}

.top-randomtitle{
height:45px;
position:relative;
top:-20px;
left:-10px;
}

.top-randomtitle a{
z-index:51;
height:45px;
display:block;
background:#000;
border: 1px solid #c48d71;
outline: solid 1px #49332a;
text-shadow: 1px 1px 15px #fcbaff;
overflow: hidden;
}
.top-randomtitle a:hover{
z-index:51;
color:#a0ff93;
box-shadow: 0px 0px 4px 4px #29ff0c;
}
.top-randomw1f{
position:absolute;
left: 38.5%;
top:0;
}
.top-randomw2f{
position:absolute;
left: 50.5%;
top:0;
}
.top-randomw3f{
position:absolute;
left: 62.5%;
top:0;
}
.top-randomw4f{
position:absolute;
left: 74.5%;
top:0;
}
.top-randomw5f{
position:absolute;
left: 86.5%;
top:0;
}
.top-randomw1{
width:200px;
height:20px;
position: absolute;
top: 64px;
}
.top-randomw1:hover{
z-index:11;
}
.top-randomw1a{
width:200px;
position: absolute;
top: 216px;
}
.top-randomw1a:hover{
z-index:11;
}
.top-randomw2{
width:200px;
height:20px;
position: absolute;
top: 64px;
}
.top-randomw2:hover{
z-index:11;
}
.top-randomw2a{
width:200px;
position: absolute;
top: 216px;
}
.top-randomw2a:hover{
z-index:11;
}
.top-randomw3{
width:200px;
height:20px;
position: absolute;
top: 64px;
}
.top-randomw3:hover{
z-index:11;
}
.top-randomw3a{
width:200px;
position: absolute;
top: 216px;
}
.top-randomw3a:hover{
z-index:11;
}
.top-randomw4{
width:200px;
height:20px;
position: absolute;
top: 64px;
}
.top-randomw4:hover{
z-index:11;
}
.top-randomw4a{
width:200px;
position: absolute;
top: 216px;
}
.top-randomw4a:hover{
z-index:11;
}
.top-randomw5{
width:200px;
height:20px;
position: absolute;
top: 64px;
}
.top-randomw5:hover{
z-index:11;
}
.top-randomw5a{
width:200px;
position: absolute;
top: 216px;
}
.top-randomw5a:hover{
z-index:11;
}
@media screen and (min-width: 700px) and (max-width: 879px){
.top-randomw1f{
position:absolute;
left: 65%;
top:0;
}
.top-randomw2f{
display:none;
}
.top-randomw3f{
display:none;
}
.top-randomw4f{
display:none;
}
.top-randomw5f{
display:none;
}
}
@media screen and (min-width: 880px) and (max-width: 991px){
.top-randomw1f{
position:absolute;
left: 59.5%;
top:0;
}
.top-randomw2f{
position:absolute;
left: 75%;
top:0;
}
.top-randomw3f{
display:none;
}
.top-randomw4f{
display:none;
}
.top-randomw5f{
display:none;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px){
.top-randomw1f{
position:absolute;
left: 47.2%;
top:0;
}
.top-randomw2f{
position:absolute;
left: 62.6%;
top:0;
}
.top-randomw3f{
position:absolute;
left: 78%;
top:0;
}
.top-randomw4f{
display:none;
}
.top-randomw5f{
display:none;
}
}
@media screen and (min-width: 1200px) and (max-width: 1359px){
.top-randomw1f{
position:absolute;
left: 40.8%;
top:0;
}
.top-randomw2f{
position:absolute;
left: 54.5%;
top:0;
}
.top-randomw3f{
position:absolute;
left: 68.2%;
top:0;
}
.top-randomw4f{
position:absolute;
left: 82%;
top:0;
}
.top-randomw5f{
display:none;
}
}
@media screen and (min-width: 1360px) and (max-width: 1600px){
.top-randomw1f{
position:absolute;
left: 36%;
top:0;
}
.top-randomw2f{
position:absolute;
left: 48%;
top:0;
}
.top-randomw3f{
position:absolute;
left: 60%;
top:0;
}
.top-randomw4f{
position:absolute;
left: 72%;
top:0;
}
.top-randomw5f{
position:absolute;
left: 84%;
top:0;
}
}
@media screen and (max-width: 699px){
.top-randomall{
display:none;
}
}

ピンク文字の部分はpcでのみ表示するためのものなので不用なら消しとくれ。
cssは一応レスポンシブになるようにしてあるけど、「外観」→「カスタマイズ」からコンテナの最大幅を1330pxにしてる人向けの設定なので適宜調整してくれたまえ。
以上で、当サイトと同様のものが追加できるはずだぞ♡

参考サイト:ワードプレスのランダム表示の負荷を軽くする方法(キャッシュとか)
あとはキャッシュを設定してさらに負荷を軽減できるようなので上記のサイトを参考にやってみればいいんじゃないかな。

 


 
    これで勝つる・・・!

  おっと
  サイトロゴの縦幅が当サイトと同じかそれ以上でないとcssが崩壊するのは変わってないからな