2022年8月17日ホームサイト製作SWELL【SWELL】新着記事にNEWボタンを実装するクライアント様から、「NEWボタンを実装したい」との相談を受けました。トール)にはある機能なのですが、SWELLにはない......。ことで、なんとかするしかないわけで。なんとかしたので残しておきます。5日くらい考えちゃったよ。実装自体は簡単なので、NEWボタン実装してえよ!って人、是非是非、どぞ。WordPressサイト制作案件で新着記事のアイキャッチ画像上に【NEW】を表示してほしいというご要望を頂きました。ワードプレス」で調べたらヒットしたこのサイト。SWELLではこの通りにしてもどうにもならんので、SWELLではどうするかを私の方で書いてみます。必要なものテキストエディタ(なんでもいいけどサブライムテキストがおすすめ)FTPソフト(わしのオススメはFileZilla)この2つは絶対必要だから用意してくれよな。(まあなんとかしたらこの2つじゃなくてもいいかもだけど)あと子テーマ入れてない人は子テーマもいれといてください。親テーマアップデートされたら全部消えちゃうんで子テーマ絶対入れて。SWELLにNEWボタンを実装する方法じゃーやってこー。STEPFTPソフトでサイトに繋ぐFTPソフトでサイトに繋ぎます。その中のドメイン名の中にある「public_html」→「wp-content」→「themes」→「swell」の順に開いてみてね。STEP親テーマの中にある「parts」をパソコンにダウンロード親テーマの中にpartsというファイルがあるんで、丸ごとダウンロードしましょう。ほんとまるまるダウンロードしよう。STEPダウンロードしたフォルダの中のいらないやつは消そう!いらないファイルは邪魔になるのでけしていきましょーね。partsの中の「post_listフォルダ」以外を消します。post_listの中の「itemフォルダ」以外消します。itemの中の「thumb.php」以外消します。フォルダはまるごとアップロードする予定だから、残したやつは全部そのまま残しといてね。STEPthumb.phpをテキストエディタ開いてコードを追加しようthumb.phpをテキストエディタ開いて、以下のコードを見つけてください。?>">その直前に以下のコードをつけ足します。}?>days=10;↑10日以内にNEWがつくよということになるので、3日以内がいいなら3に変えるなど各自変えましょう。コード自体は参考にしたサイト様のコードのままです。できたら上書き保存!STEP「partsフォルダ」ごと子テーマにアップロードFTPソフトで子テーマを開いて、そこにpartsフォルダごとアップロード。STEPサイトを確認できたらサイトを確認......って思ったけど、10日に設定したら私このサイトあんま更新してないからNEWつかなかったわ......daysを20日に変更して確認......。20日以内にしたのに1つにしかNEWつかなかった。/(^o^)\ふえ......STEPCSSで整えるこれだけだとNEWが乗っかってるだけになるので、これを良い感じにラベルにしていきます。class="new">New</span></div>';これ書きましたでしょ。class=”new_bg”とクラスが指定されていますので、これ使ってCSSで色々指定したり、自分好みのクラスに変えたりして使っていきましょう。私は今回リボンつけたいので、上のecho部分は以下のコードに変更しました。}?>サイトの追加CSSに以下のコードを追加。rgba(99,124,39,0.6);}色とかはお好きに。整えたら終わりよ!いやーできてよかったな最初はさ、「いや、NEWボタンいるかなあ、だってNEWコーナーあるしなあ......」って思ってたんですけど、でもあったらあったで可愛いですねNEWボタン。これからドシドシ更新してこ!って考えているサイトだと特にあったほうが、よく訪れてくれるユーザーにとっても便利で良い機能だと思いました。thumb.phpを見つけるまで、めっちゃ苦戦したんですけども、いやあ。面白いな、こういうの......。トライアンドエラーが多いウェブデザイン、やればやるほど楽しいですね。最初は「いらんやろ!!!」って気持ちがほんと大きかったけども、こうやって要望を出していただけるからこそステップアップできるし、実装出来たらできたで便利な部分も見えてくるので良いですね。いらないって言われないと良いなとも思いつつ。(よくあるよね)今日はこれで終わります。