質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

8回答

4140閲覧

WordPress 新着記事一覧に「NEW!」アイコンを付けたい

sakura-

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

1クリップ

投稿2020/06/19 16:46

編集2020/06/19 18:35

前提・実現したいこと

HTML・CSSは、独学で読み書きできる程度ですが、PHPは書けないWordPress初心者です。

WordPressで動いている企業ホームページのトップページに表示されるブログの新着記事一覧の、5日前までの記事に「NEW!」のアイコンを付けたいと思っています。
以前、外注して作ったホームページなのですが、その会社はもうなくなってしまっているようです。
ですので、自力でカスタマイズしようと考えたのですが、上手く動かず、こちらで皆様のお知恵をお借りできればと思い投稿します。

ブログは4つのカテゴリーに分かれていて、そのすべての新着記事を投稿が新しい順に表示しています。
表示順は、「投稿日」「タイトル」「カテゴリー名」となっていて、
投稿日が5日前までの記事のタイトルの前に「NEW!」アイコンを追加し、
「投稿日」「NEW!」「タイトル」「カテゴリー名」 のようにしたいと考えています。
「NEW!」はCSSでアイコン風にするつもりです。

コードは、functions.php内にこのように記述されています。

該当のソースコード

php

1// 最新の投稿をリンク付きタイトルで表示 2function shortcode_recent_posts( $args ) { 3 global $wpdb; 4 5 $catgoires = implode(', ', array( 6 2, // ◇カテゴリーA 7 7, // ◇カテゴリーB 8 19, // ◇カテゴリーC 9 33, // ◇カテゴリーD 10 )); 11 12 $query = " 13 SELECT 14 $wpdb->posts.ID as ID, 15 $wpdb->posts.post_title as post_title, 16 $wpdb->posts.post_date as post_date, 17 $wpdb->terms.name as category_name 18 FROM $wpdb->posts 19 LEFT JOIN $wpdb->term_relationships ON 20 ($wpdb->posts.ID = $wpdb->term_relationships.object_id) 21 LEFT JOIN $wpdb->term_taxonomy ON 22 ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id) 23 LEFT JOIN $wpdb->terms ON 24 ($wpdb->term_taxonomy.term_id = $wpdb->terms.term_id) 25 WHERE $wpdb->posts.post_status = 'publish' 26 AND $wpdb->term_taxonomy.taxonomy = 'category' 27 AND $wpdb->term_taxonomy.term_id IN ($catgoires) 28 ORDER BY post_date DESC 29 LIMIT 15 30 "; 31 32 $results = $wpdb->get_results($query); 33 34 $items_buff = array(); 35 foreach ( $results as $p ) { 36 $items_buff []= '<li><a href="'.get_permalink( $p->ID ).'">'. 37 '<span class="time">'.mysql2date( 'Y.m.d', $p->post_date, false ).'</span>'. 38 //ここに「NEW!」をいれたい(<span class="new">NEW!</span>) 39 '<span class="title">'.esc_html( wp_trim_words( $p->post_title, 40 ) ).'</span> - '. 40 '<span class="category">'.esc_html( $p->category_name ).'</span>'. 41 '</a></li>'; 42 } 43 $items_html = implode( '', $items_buff ); 44 45 return '<ul>'.$items_html.'</ul>'; 46} 47add_shortcode('recent_posts', 'shortcode_recent_posts');

試したこと

ググると色々の方法がありましたが、残念ながら試した全てで上手く表示されませんでした。

例えば、こちらを参考にする場合・・・

PHP

1// functions.php内に 2function add_new($date,$days){ 3$today = date_i18n('U'); 4$elapsed = date('U',($today - $date)) / 86400; 5if( $days > $elapsed ){ 6echo '<span class="new">New</span>'; 7}}

HTML

1// 該当箇所に 2<?php add_new(get_the_time('U'),5); ?>
  • functions.php内のどこに書いてもよいのか?
  • 構文はこのままで良いのか?
  • 該当箇所にはどのように書けばよいのか?

などが分からなく
思いつく限り(想像で)色々試しましたが、上手く表示されないか、重大なエラーになるかのどちらかで、途方に暮れています。

補足

ついでに、<span class="category 〇〇>のように、カテゴリーごとにクラス分けして、色分けもできればと考えています。
〇〇の部分は、slug名 や slug_ID が入れば、CSSで色分けできると思っています。

初心者の不躾な質問で恐縮ですが、お力添えいただければ幸いです。
どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答8

0

PHP

1 $items_buff []= '<li><a href="'.get_permalink( $p->ID ).'">'. 2 '<span class="time">'.mysql2date( 'Y.m.d', $p->post_date, false ).'</span>'. 3 add_new( get_the_time( 'U', $p ) , 5 ). 4 '<span class="title">'.esc_html( wp_trim_words( $p->post_title, 40 ) ).'</span> - '. 5 '<span class="category">'.esc_html( $p->category_name ).'</span>'. 6 '</a></li>'; 7 // 未テスト

PHP

1function add_new( $date, $days ){ 2 $res = ''; 3 $today = date_i18n( 'U' ); 4 $elapsed = date( 'U', ( $today - $date ) ) / 86400; 5 if ( $days > $elapsed ) $res = '<span class="new">New</span>'; 6 return $res; 7} // 未テスト

【get_the_time() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/get_the_time/

投稿2020/06/20 12:21

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-

2020/06/20 13:17

ありがとうございます! 上のコードの、該当箇所を書き換え 下のコードを、functions.php内の別の場所に追記 しました。 残念ながら、重大なエラーでWebサイトが見れない状態になってしましました。
kei344

2020/06/20 13:37

手元の環境では少なくとも提示箇所はエラーが出ないので、「別の場所に追記」が元の関数を削除していないのでは。関数名の重複はできないので。
sakura-

2020/06/20 17:57

わぁーー! できました。 上のコードをペーストする場所を間違っていました;; $items_buff という文字が2つあるのに気付かず(以下略・・・ 感動してしましました。 これから、いただいたコードを1行ずつ読み解いていきたいと思います。 別のコードを見つけてきて、そちらを使用することで「解決済み」にしてしまったので、ベストアンサーを付けられなくてスミマセン。 本当にありがとうございました。m(_ _)m
guest

0

wordpressは全くの素人だけどクエリ文いじくったらだめなの?DBの種類わからんけど
5日以内なら文字列new返すようにcase文書いて

php

1 $query = " 2 SELECT 3 $wpdb->posts.ID as ID, 4 $wpdb->posts.post_title as post_title, 5 $wpdb->posts.post_date as post_date, 6 $wpdb->case when posts.post_date + 5 > CURDATE() + 0 then 'new' else 'notnew' end as is_new, 7 $wpdb->terms.name as category_name 8 (以下略)"

あとはくっつければ?class付与さえできればcssでどうにでもできそうだし。

php

1 $items_buff = array(); 2 foreach ( $results as $p ) { 3 $items_buff []= '<li><a href="'.get_permalink( $p->ID ).'">'. 4 '<span class="time">'.mysql2date( 'Y.m.d', $p->post_date, false ).'</span>'. 5 //ここに「NEW!」をいれたい(<span class="new">NEW!</span>) 6 '<span class="'.esc_html( $p->is_new ).'"></span>'. 7 '<span class="title">'.esc_html( wp_trim_words( $p->post_title, 40 ) ).'</span> - '. 8 '<span class="category">'.esc_html( $p->category_name ).'</span>'. 9 '</a></li>'; 10 } 11 $items_html = implode( '', $items_buff );

投稿2020/06/20 13:39

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-

2020/06/20 13:54

ありがとうございます! 試してみましたが、新着情報の<div>の中が真っ白になってしまい、何も表示されませんでした。 でも、重大なエラーにはならなかったので、一歩前進!という感じです。 クエリ文の書き方が全く分からなかったので、 なるほどっ!こういう感じに書けば良いんだな。というヒントになりそうです。 あとは、FROM と WHERE の部分に何か書き足せば、表示されるかもしれませんね。 良い勉強になります。
sousuke

2020/06/20 14:00

データベースやpost_dateの型が何かわからなかったのでSQLは超適当です。 多分queryが失敗しているんでしょうね。私が言いたかったのは「SQLで文字列処理したら?」ってことです。
guest

0

今までやり取りしていたのは、ショートコードではなく
テンプレート(single.phpなど)に追記するやり方ですが
その辺はご理解いただけていますでしょうか?

投稿2020/06/20 07:20

AMK

総合スコア765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-

2020/06/20 07:39

テンプレートに追記する方法をご助言いただいているのは、理解しているつもりでした。 でも、今回は「トップページに表示する新着一覧」に「NEW!」を表示したいので、ショートコードに指定しなくてはならないのです。 と思い込んでいましたが、、、 もしかして、テンプレートに追記して、記事本体に「NEW!」が表示されれば、新着一覧にも同時に反映されるということでしょうか? 早速試してみます!!
sakura-

2020/06/20 08:58 編集

試してみました! 記事本体と、カテゴリー一覧には、無事「NEW!」が表示されましたが、 残念ながらトップページの新着記事一覧には反映されませんでした。 追記したのは、template-parts → post → content.php の中です。 ```PHP <header class="entry-header"> <?php add_new(get_the_time('U'),3); ?> // ←ここに追記! <?php if ( is_single() ) { the_title( '<h1 class="entry-title">', '</h1>' ); } elseif ( is_front_page() && is_home() ) { the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' ); } else { the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); } ?> </header><!-- .entry-header --> ```
guest

0

自己解決

皆様のお力を借りながら、当方も様々なTipsを見て色々と試しているうちに、
そもそも、今使っている一連のショートコードを使わないで、
まるっと別のショートコードに変えてしまえば良いのではないか? という結論に達しました。

こちらのブログのコードを拝借し、
表示順、class名、aタグが囲む範囲を変更しました。

PHP

1// 最新記事リスト 2function getNewItems($atts) { 3 extract(shortcode_atts(array( 4 "num" => '', //最新記事リストの取得数 5 "cat" => '', //表示する記事のカテゴリー指定 6 "days" => '', //何日以内の記事にadd_textをつけるか指定 7 "add_text" => '' //表示するテキスト 8 ), $atts)); 9 global $post; 10 $oldpost = $post; 11 $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat); 12 $retHtml='<ul class="news_list">'; 13 foreach($myposts as $post) : 14 $cat = get_the_category(); 15 $catname = $cat[0]->cat_name; 16 $catslug = $cat[0]->slug; 17 setup_postdata($post); 18 $retHtml.='<li><a href="'.get_permalink().'">'; 19 $retHtml.='<span class="time">'.get_post_time( get_option( 'date_format' )).'</span>'; 20 //指定日以内にadd_textをつける 21 $today = date_i18n('U'); 22 $entry_day = get_the_time('U'); 23 $past_days = date('U',($today - $entry_day)) / 86400; 24 if ( $days > $past_days ): 25 $retHtml.='<span class="new">'.$add_text.'</span>'; 26 endif; 27 $retHtml.='<span class="title">'.the_title("","",false).'</span> ─ '; 28 $retHtml.='<span class="category '.$catslug.'">'.$catname.'</span>'; 29 $retHtml.='</a></li>'; 30 endforeach; 31 $retHtml.='</ul>'; 32 $post = $oldpost; 33 wp_reset_postdata(); 34 return $retHtml; 35} 36add_shortcode("newsNew", "getNewItems"); //getNewItemsは関数名、newsNewはショートコード名

CSS

1/* 新着情報 */ 2span.new { 3 background: #cf2e2e; 4 padding: 0.2rem 0.4rem; 5 color: #FFF; 6 font-size: 0.6rem; 7 border-radius: 4px; 8 font-weight: 700; 9 margin-right: 0.5em; 10 vertical-align: 0.1em; 11} 12span.category.slugA { 13 background: #ffeaf4; 14 padding: 0.2em 0.5em; 15 font-size: 0.9em; 16 border-radius: 4px; 17 margin-left: 0.5em; 18} 19span.category.slugB { 20 background: #d5e5fd; 21 padding: 0.2em 0.5em; 22 font-size: 0.9em; 23 border-radius: 4px; 24 margin-left: 0.5em; 25} 26span.category.slugC { 27 background: #e8f9da; 28 padding: 0.2em 0.5em; 29 font-size: 0.9em; 30 border-radius: 4px; 31 margin-left: 0.5em; 32} 33span.category.slugD { 34 background: #fff5d0; 35 padding: 0.2em 0.5em; 36 font-size: 0.9em; 37 border-radius: 4px; 38 margin-left: 0.5em; 39}

CSSで見た目を整えて、上手く表示することができました。
こちらのコードだと、書いてある内容も分かりやすく、今後改造もしやすいのではないかと思います。

ご協力いただきました皆様、本当にありがとうございました。

投稿2020/06/20 13:45

sakura-

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

'<?php add_new(get_the_time('U'),5); ?>'.
ではなく

<?php add_new(get_the_time('U'),5); ?>

で表示してみたらどうですか?

とりあえず、ほかの文字と連結したりなどの処理は
後回しにして、コードをなるべく単純化して
まずは現状のコードが正常に機能しているか?調べてください。

投稿2020/06/20 07:08

編集2020/06/20 07:10
AMK

総合スコア765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-

2020/06/20 07:13

<?php add_new(get_the_time('U'),5); ?> を試してみましたが、 残念ながら、「重大なエラー」で、Webサイトが表示されない状態になってしまいました。 調べながら色々試して頑張ってみます(^^
guest

0

そのままの文字がコメントアウトされた状態でhtmになってしまうのです(^^;

ココが重要です

<?php add_new(get_the_time('U'),5); ?>

と出ているのか?
<span class="new">New</span>
と出ているのかで大きな違いがあります。

プログラムは理屈で考えれば必ず道は開けます

上記の場合だと
色々原因や可能性を考えることができます

<?php add_new(get_the_time('U'),5); ?>


出ている場合だと、テンプレートにチャント書けていない可能性が有る

後者の<span class="new">New</span>だと
テンプレートでの実行は出来ていてfunctions.phpも動いているが
出力の仕方に問題がある?

のように、予想して1つ1つ可能性をつぶしていきましょう

で、どっちが出ています?
若しくは別の表示のされ方ですか?

投稿2020/06/20 06:17

AMK

総合スコア765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-

2020/06/20 07:05

色々と書き直して試している中なので、今もう一度そのままの文字列を記述してみました。 該当の行に「'<?php add_new(get_the_time('U'),5); ?>'.」と書き込みましたが、「重大なエラー」でWebサイト自体が表示されなくなっていまいます。 PHP内の記述なので、最初の <?php と、最後の;?>をはずしてみたらどうだろう?と思い、それも試しましたが同様です。 コメントアウトされた状態が今再現できなかったのですが、html内に<!-- <?php add_new(get_the_time('U'),5); ?> --> と書き出されたように覚えています。 NEWを書き出したい場所は、「該当のソースコード」の38行目です。 最終的に固定ページに [recent_posts] というショートコードを入れるので、その手前(functions.php内のshortcode_recent_posts)で、完結させなくてはいけないと思っています。
guest

0

まずは、functions.php のどこに書けば?ですが

色々コードが書いている場合は
一番最後尾の行から書き足しましょう
コードによっては最後の行に ?> が有る場合とない場合がありますが
ほとんどないと思います。
?>が有る場合は、それより前にコードを書いてください。

こんな感じ

コード
?>

あとは、Windowsのメモ帳を使っているのであればすぐにやめましょう
terapadやatomなどのテキストエディタと言うモノがそれを使ってください。

NEWを出したい場所に

<?php add_new(get_the_time('U'),5); ?>

を追加してください。
single.phpかな?

カテゴリの色分けなどは、今の問題をチャント理解してから自分でトライしてまた質問してください。
丸投げはダメですよ!!(笑)

投稿2020/06/19 23:40

AMK

総合スコア765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-

2020/06/20 05:50

ご回答いただきありがとうございます! functions.phpの末尾にコードを追加しても、それを読み出す新着一覧の一連の指定がショートコードになっているからか、該当箇所に<?php add_new(get_the_time('U'),5); ?>を書いても、そのままの文字がコメントアウトされた状態でhtmになってしまうのです(^^; ① 指定するものに適当な名前を付けて ② <li><span>〜〜</span></li>の中にそれを読み出して ③ できあがったものを<ul>〜〜</ul>で囲んで、できあがり! という流れだと思うのですが、 ① 指定の方法、② 読み出す呪文 をどのようにすればよいのか悩んでいます。 似たショートコードを(https://xakuro.com/blog/wordpress/504/)がありましたので、そちらを参考に、トライ&エラーをもう少し繰り返してみようと思います。 テキストエディタは、「mi」というものを使っています。 カテゴリの色分けも同様に、指定と呪文のトライ&エラーを続けます。
guest

0

これは試しましたか?

foreach ( $results as $p ) { $items_buff []= '<li><a href="'.get_permalink( $p->ID ).'">'. '<span class="time">'.mysql2date( 'Y.m.d', $p->post_date, false ).'</span>'. '<span class="new">NEW!</span>'. '<span class="title">'.esc_html( wp_trim_words( $p->post_title, 40 ) ).'</span> - '. '<span class="category">'.esc_html( $p->category_name ).'</span>'. '</a></li>'; } $items_html = implode( '', $items_buff );

投稿2020/06/19 18:14

YopiNoji

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-

2020/06/19 18:31

早速のご回答ありがとうございます! 新着一覧にある全ての記事に「NEW!」が表示されてしまいます。 私の質問の仕方が悪かったのですが、、、 新着一覧のうち、投稿日が5日前までの記事に「NEW!」アイコンを付けたいと思っています。 質問文も少し修正しておきます。 引き続きよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問