【SWELL】新着記事にNEWボタンを実装する

クライアント様から、「NEWボタンを実装したい」との相談を受けました。
私が最近使ってるのはSWELLなのですが、SWELLにはなんとNEWボタンがありません；；

THE THOR（ザトール）にはある機能なのですが、SWELLにはない……。

てことで、なんとかするしかないわけで。
なんとかしたので残しておきます。

5日くらい考えちゃったよ。
実装自体は簡単なので、NEWボタン実装してえよ！って人、是非是非、どぞ。

↓こういうやつができるよ↓

参考にしたサイト

Googleにて「NEWボタン　ワードプレス」で調べたらヒットしたこのサイト。
めちゃくちゃ参考になりました。

ただ、SWELLではこの通りにしてもどうにもならんので、SWELLではどうするかを私の方で書いてみます。

必要なもの

テキストエディタ（なんでもいいけどサブライムテキストがおすすめ）
FTPソフト（わしのオススメはFileZilla）

この2つは絶対必要だから用意してくれよな。
（まあなんとかしたらこの2つじゃなくてもいいかもだけど）

あと子テーマ入れてない人は子テーマもいれといてください。
親テーマアップデートされたら全部消えちゃうんで子テーマ絶対入れて。

SWELLにNEWボタンを実装する方法

じゃーやってこー。

STEP

FTPソフトでサイトに繋ぐ

FTPソフトでサイトに繋ぎます。

その中のドメイン名の中にある「public_html」→「wp-content」→「themes」→「swell」の順に開いてみてね。

STEP

親テーマの中にある「parts」をパソコンにダウンロード

親テーマの中にpartsというファイルがあるんで、丸ごとダウンロードしましょう。

ほんとまるまるダウンロードしよう。

STEP

ダウンロードしたフォルダの中のいらないやつは消そう！

いらないファイルは邪魔になるのでけしていきましょーね。

まずpartsの中の「post_listフォルダ」以外を消します。

post_listの中の「itemフォルダ」以外消します。

itemの中の「thumb.php」以外消します。

フォルダはまるごとアップロードする予定だから、残したやつは全部そのまま残しといてね。

STEP

thumb.phpをテキストエディタ開いてコードを追加しよう

thumb.phpをテキストエディタ開いて、以下のコードを見つけてください。

<div class="p-postList__thumb c-postThumb<?php echo ! has_post_thumbnail( $the_id ) ? ' noimg_' : ''; ?>">

その直前に以下のコードをつけ足します。

<?php
  $days = 10;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $elapsed = date('U',($today - $entry)) / 86400;
  if ( $days > $elapsed ) {
    echo '<div class="new_bg"><span class="new">New</span></div>';
  }
?>

days=10;

↑10日以内にNEWがつくよということになるので、3日以内がいいなら3に変えるなど各自変えましょう。

コード自体は参考にしたサイト様のコードのままです。

できたら上書き保存！

STEP

「partsフォルダ」ごと子テーマにアップロード

FTPソフトで子テーマを開いて、そこにpartsフォルダごとアップロード。

STEP

サイトを確認

できたらサイトを確認……って思ったけど、10日に設定したら私このサイトあんま更新してないからNEWつかなかったわ……daysを20日に変更して確認……。

20日以内にしたのに1つにしかNEWつかなかった。
／(^o^)＼ふえ……

STEP

CSSで整える

これだけだとNEWが乗っかってるだけになるので、これを良い感じにラベルにしていきます。

タグは参考にしたサイトのものを参考にしていきますよ！（もちろん自分で作ってもOK）

thumb.phpに差し込んだコード、に↓

echo '<div class="new_bg"><span class="new">New</span></div>';

これ書きましたでしょ。

class=”new_bg”とクラスが指定されていますので、これ使ってCSSで色々指定したり、自分好みのクラスに変えたりして使っていきましょう。

私は今回リボンつけたいので、上のecho部分は以下のコードに変更しました。

echo '<div class="ribbon_new_sec"><span class="new_area_sec">NEW</span></div>';

全体だとこんなかんじ↓

<?php
  $days = 20;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $elapsed = date('U',($today - $entry)) / 86400;
  if ( $days > $elapsed ) {
    echo '<div class="ribbon_new_sec"><span class="new_area_sec">NEW</span></div>';
  }
?>

サイトの追加CSSに以下のコードを追加。

（ちょっと私好みに変えています）

/*NEWボタン*/
.ribbon_new_sec {    
    display: block;
    position: relative;
	left: 0;
    margin: 0px auto;
    padding: 0;
  }

.new_area_sec {    
    display: inline-block;
    position: absolute;
    top: -6px;
    left: 10px;
    margin: 0;
    padding: 10px 0 7px;
    z-index: 2;
    width: 40px;
    text-align: center;
    color: white;
    font-size: 13px;
    background-color: rgba(124,39,66,0.6);
    border-radius: 2px 0 0 0;
  }

.new_area_sec:before{
    position: absolute;
    content: '';
    top: 0;
    right: -5px;
    border: none;
    border-bottom: solid 6px #637C27;
    border-right: solid 5px transparent;
}

.new_area_sec:after{
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 10px solid rgba(99,124,39,0.6);
}

色とかはお好きに。

整えたら終わりよ！