【旧記事】wordpressテーマ「luxeritas」でヘッダーのサイトロゴ右にランダム記事一覧を表示する

2019/08/13 22:42

!-この記事は古くなっています。こちらの記事をご覧ください。



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

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

↑ヘッダーのコレだぞ♡コレ♡申し訳程度にレスポンシブだぞ♡

まず最初に「プラグイン」→「新規追加」を選択して「Advanced Random Posts Widget」を検索、有効化。これが無いと脳筋には無理だから仕方ないね。

手順としては、

1,ヘッダーロゴの右隣にウィジェットエリアを追加するphpコードを追加
2,そこにプラグインをぶち込んでcssを整える

これで終わり。

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

まずウィジェットエリア追加のために「functions.php」、「header.php」、「style.css」の3つを編集する。

「functions.php」へ以下のコードを追加

register_sidebar(array(
'name' => 'header-logo-migi01' ,
'id' => 'header-l-migi01' ,
'before_widget' => '<div class="header-logo-migi01">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
register_sidebar(array(
'name' => 'header-logo-migi02' ,
'id' => 'header-l-migi02' ,
'before_widget' => '<div class="header-logo-migi02">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
register_sidebar(array(
'name' => 'header-logo-migi03' ,
'id' => 'header-l-migi03' ,
'before_widget' => '<div class="header-logo-migi03">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
register_sidebar(array(
'name' => 'header-logo-migi04' ,
'id' => 'header-l-migi04' ,
'before_widget' => '<div class="header-logo-migi04">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
「header.php」の『</div><!--/#head-in-->』と書かれているところの直前に以下のコードを追加

<div class="hm-off01">
<?php dynamic_sidebar('header-l-migi01'); ?>
<?php dynamic_sidebar('header-l-migi02'); ?>
<?php dynamic_sidebar('header-l-migi03'); ?>
<?php dynamic_sidebar('header-l-migi04'); ?>
</div>

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

.hm-off01 {
line-height:1.3;
}
.header-logo-migi01 {
font-size: 5px; font-size: 1.2rem;
color: #ffb03a;
position: absolute;
left: 55%;
width: 210px;
height: 10px;
top: 47px;
}
.header-logo-migi02 {
font-size: 5px; font-size: 1.2rem;
color: #ffb03a;
position: absolute;
left: 65%;
width: 210px;
height: 10px;
top: 47px;
}
.header-logo-migi03 {
font-size: 5px; font-size: 1.2rem;
color: #ffb03a;
position: absolute;
left: 75%;
width: 210px;
height: 10px;
top: 47px;
}
.header-logo-migi04 {
font-size: 5px; font-size: 1.2rem;
color: #ffb03a;
position: absolute;
left: 85%;
width: 210px;
height: 10px;
top: 47px;
}

@media (max-width: 991px){
.header-logo-migi01 {
position: absolute;
left: 60%;
width: 210px;
height: 10px;
top: 47px;
}
.header-logo-migi02 {
position: absolute;
left: 78%;
width: 210px;
height: 10px;
top: 47px;
}
.header-logo-migi03 {
display:none;
}
.header-logo-migi04 {
display:none;
}
}
@media screen and (min-width: 992px) and (max-width: 1155px){
.header-logo-migi01 {
position: absolute;
left: 45%;
width: 210px;
height: 10px;
top: 47px;
}
.header-logo-migi02 {
position: absolute;
left: 58%;
width: 210px;
height: 10px;
top: 47px;
}
.header-logo-migi03 {
position: absolute;
left: 70%;
width: 210px;
height: 10px;
top: 47px;
}
.header-logo-migi04 {
position: absolute;
left: 82%;
width: 210px;
height: 10px;
top: 47px;
}
}
@media screen and (max-width: 939px){
.hm-off01{
display:none;
}
}

あとは「外観」→「ウィジェット」から、

・「header-logo-migi01」
・「header-logo-migi02」
・「header-logo-migi03」
・「header-logo-migi04」

この4つに「Rondom Post」をドラッグ&ドロップして

・「General」タブからタイトルを削除
・「Posts」タブの「Number of posts to show」の数値を2に
・「Thumbnail」タブの「Display thumbnail」にチェック、「Use custom thumbnail sizes」にチェック、数値を横175、縦100に

最後に「header-logo-migi01」の「Rondom Post」の「Custom CSS」タブへ以下のコードを追加。

/* ul */
.arpw-ul {
z-index: 5;
width: 350px;
}
.arpw-li {
margin-bottom:5px;
}
/* title */
.arpw-title {
z-index: 10;
position: relative;
left: -230px;
top: 10px;
color:#f9ac39;
background: #49332a;
line-height:1.0;
font-size: 12px;
font-weight: bold;
}
.arpw-title:hover {
z-index: 11;
color: #ff0000;
background: #300000;
}
/* thumbnail */
.arpw-thumbnail {
z-index: 9;
position: relative;
top: 30px;
border: 1px solid #fffa00;
}
.arpw-thumbnail:hover {
z-index: 11;
opacity:1.0;
border: 2px solid #fffa00;
outline: solid 3px #fffc70;
}

以上で、当サイトと同様のものが追加できるはずだぞ♡
後は4つのエリアそれぞれでカテゴリー分けするなりして重複しないようにしてみればいいんじゃないかな。

 


 
  ああ、ひとつ言い忘れていたが
  サイトのロゴ画像の縦のサイズが当サイトと同じかそれ以上でないとcss崩壊するからなw