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

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

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

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

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

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

目次

参考にしたサイト

Puzzle(パズル)
CSSで作る!!WordPressの新着記事【NEW】をアイキャッチ画像上に表示する方法 | Puzzle(パズル) WordPressサイト制作案件で新着記事のアイキャッチ画像上に【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);
}

色とかはお好きに。

整えたら終わりよ!

いやーできてよかったな

最初はさ、「いや、NEWボタンいるかなあ、だってNEWコーナーあるしなあ……」って思ってたんですけど、でもあったらあったで可愛いですねNEWボタン。

これからドシドシ更新してこ!って考えているサイトだと特にあったほうが、よく訪れてくれるユーザーにとっても便利で良い機能だと思いました。

thumb.phpを見つけるまで、めっちゃ苦戦したんですけども、いやあ。
面白いな、こういうの……。

トライアンドエラーが多いウェブデザイン、やればやるほど楽しいですね。
正直最初は「いらんやろ!!!」って気持ちがほんと大きかったけども、こうやって要望を出していただけるからこそステップアップできるし、実装出来たらできたで便利な部分も見えてくるので良いですね。

やっぱいらないって言われないと良いなとも思いつつ。
(よくあるよね)

今日はこれで終わります。ではまたー。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次
閉じる