カテゴリーページのブログカードにアイキャッチや説明を挿入したい

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも カテゴリーページのブログカードにアイキャッチや説明を挿入したい

4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #52307
      koiitirou2
      ゲスト

      こんにちわ。
      いつも楽しく使わせて頂いています。
      カテゴリーページのURLを記事中に挿入してブログカードを表示したいと思っています。
      AMP表示の問題があるのでsimplicityデフォルトのブログカードを使いたいと思っています。

      アイキャッチと説明が一定なのでカスタマイズしたいと思っていますが、
      なにか方法はあるでしょうか?
      ヒントだけでも頂ければ幸いです。

    • #52314
      アバター画像わいひら
      キーマスター

      結構大変な変更になると思うので、サポート対象外のものにもあるように、ヒントだけにさせていただこうと思います。
      カテゴリページのブログカードは、仕様上外部リンクとみなされるため、子テーマで外部リンク作成用の関数の処理を上書きすれば動作を変更させることができます。

      外部リンク作成用の関数は、以下になります。

      function url_to_external_ogp_blog_card_tag($url){
        if ( !$url ) return;
        $url = strip_tags($url);//URL
        if (preg_match('/.+(\.mp3|\.midi|\.mp4|\.mpeg|\.mpg|\.jpg|\.jpeg|\.png|\.gif|\.svg|\.pdf)$/i', $url, $m)) {
          return;
        }
        $url_hash = 'sp_bcc_'.md5( $url );
        $error_title = $url;//'This page is error.';
        $title = $error_title;
        $error_image = get_site_screenshot_url($url);
        //$error_image = get_template_directory_uri() . '/images/no-image.png';
        $image = $error_image;
        $excerpt = '';
        $error_rel_nofollow = ' rel="nofollow"';
        //画像編集作業用ディレクトリ
        //$dir = ABSPATH.'wp-content/uploads/excard-images-314159265/';
      
        require_once('open-graph.php');
        //ブログカードキャッシュ更新モード、もしくはログインユーザー以外のときはキャッシュの取得
        if ( !(is_blog_card_external_cache_refresh_mode() && is_user_logged_in()) ) {
          //保存したキャッシュを取得
          $ogp = get_transient( $url_hash );
        }
      
        if ( empty($ogp) ) {
          $ogp = OpenGraph::fetch( $url );
          if ( $ogp == false ) {
            $ogp = 'error';
          } else {
            //キャッシュ画像の取得
            $res = fetch_card_image($ogp->image);
            // echo('<pre>');
            // var_dump($res);
            // echo('</pre>');
      
            if ( $res ) {
              $ogp->image = $res;
            }
      
            if ( isset( $ogp->title ) )
              $title = $ogp->title;//タイトルの取得
      
            if ( isset( $ogp->description ) )
              $excerpt = $ogp->description;//ディスクリプションの取得
      
            if ( isset( $ogp->image ) )
              $image = $ogp->image;////画像URLの取得
      
            $error_rel_nofollow = null;
          }
      
          set_transient( $url_hash, $ogp,
                         60 * 60 * 24 * get_blog_card_external_cache_days() );
      
        } elseif ( $ogp == 'error' ) {
          //前回取得したとき404ページだったら何も出力しない
          // $title = $error_title;
          // $excerpt = '';
          // $image = get_template_directory_uri() . '/images/no-image.png';
        } else {
          if ( isset( $ogp->title ) )
            $title = $ogp->title;//タイトルの取得
      
          if ( isset( $ogp->description ) )
            $excerpt = $ogp->description;//ディスクリプションの取得
      
          if ( isset( $ogp->image ) )
            $image = $ogp->image;//画像URLの取得
      
          $error_rel_nofollow = null;
        }
        //var_dump($image);
      
        //ドメイン名を取得
        $domain = get_domain_name(isset($ogp->url) ? punycode_decode($ogp->url) : punycode_decode($url));
      
        //og:imageが相対パスのとき
        if(!$image || (strpos($image, '//') === false) || ((is_ssl() || is_amp()) && (strpos($image, 'https:') === false))){    // //OGPのURL情報があるか
          //相対パスの時はエラー用の画像を表示
          $image = $error_image;
        }
      
        $excerpt = get_content_excerpt( $excerpt, 160 );
      
        //ブログカードのサムネイルを右側に
        $thumbnail_class = ' blog-card-thumbnail-left';
        if ( is_blog_card_external_thumbnail_right() ) {
          $thumbnail_class = ' blog-card-thumbnail-right';
        }
      
        //新しいタブで開く場合
        $target = is_blog_card_external_target_blank() ? ' target="_blank"' : '';
      
        //コメント内でブログカード呼び出しが行われた際はnofollowをつける
        global $comment; //コメント内以外で$commentを呼び出すとnullになる
        $nofollow = $comment || $error_rel_nofollow ? ' rel="nofollow"' : null;
        // echo('<pre>');
        // var_dump($nofollow);
        // echo('</pre>');
      
        //ブログカードの幅を広げる
        $wide_class = null;
        if ( is_blog_card_external_width_auto() ) {
          $wide_class = ' blog-card-wide';
        }
      // echo('<pre>');
      // var_dump(is_blog_card_external_width_auto());
      // echo('</pre>');
        //$hatebu_url = preg_replace('/^https?:\/\//i', '', $url);
        //はてブを表示する場合
        $hatebu_tag = is_blog_card_external_hatena_visible() && !is_amp() ? '<div class="blog-card-hatebu"><a href="//b.hatena.ne.jp/entry/'.$url.'"'.$target.' rel="nofollow"><img src="//b.hatena.ne.jp/entry/image/'.$url.'" alt="" /></a></div>' : '';
      
        //GoogleファビコンAPIを利用する
        ////www.google.com/s2/favicons?domain=nelog.jp
        $favicon_tag = '<span class="blog-card-favicon"><img src="//www.google.com/s2/favicons?domain='.$domain.'" class="blog-card-favicon-img" alt="" width="16" height="16" /></span>';
      
        //サイトロゴ
        if ( is_blog_card_external_site_logo_visible() ) {
          if ( is_blog_card_external_site_logo_link_enable() ) {
            $site_logo_tag = '<a href="//'.$domain.'"'.$target.$nofollow.'>'.$domain.'</a>';
          } else {
            $site_logo_tag = $domain;
          }
          $site_logo_tag = '<div class="blog-card-site">'.$favicon_tag.$site_logo_tag.'</div>';
        }
      
        //サムネイルを取得できた場合
        if ( $image ) {
          $thumbnail = '<img src="'.$image.'" alt="" class="blog-card-thumb-image" height="100" width="100" />';
        }
        //取得した情報からブログカードのHTMLタグを作成
        $tag = '<div class="blog-card external-blog-card'.$thumbnail_class.$wide_class.' cf"><div class="blog-card-thumbnail"><a href="'.$url.'" class="blog-card-thumbnail-link"'.$target.$nofollow.'>'.$thumbnail.'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="'.$url.'" class="blog-card-title-link"'.$target.$nofollow.'>'.$title.'</a></div><div class="blog-card-excerpt">'.$excerpt.'</div></div><div class="blog-card-footer">'.$site_logo_tag.$hatebu_tag.'</div></div>';
        if ( is_wraped_entry_card() ) {
          $wide_hover_card_class = null;
          if (is_blog_card_external_width_auto()) {
            $wide_hover_card_class = ' hover-blog-card-wide';
          }
          //エントリーカードをカード化する場合はaタグを削除して全体をa.hover-cardで囲む
          $tag = wrap_entry_card($tag, $url, $target, $nofollow, ' hover-blog-card hover-external-blog-card'.$wide_hover_card_class);
          //$tag = '<a class="abc"><object><div>aaa</div></object></a>';
        }
        return $tag;
      }

      これを、子テーマに貼り付けて、カテゴリページ専用の動作を付け加えれば、多分できます。

    • #52322
      koiitirou2
      ゲスト

      いつもありがとうございます。
      もし実装できたらご報告させて頂きます。

    • #52678
      koiitirou2
      ゲスト

      いつも楽しく使わせて頂いてます。
      最近実装されたカテゴリー除外機能、便利ですね!

      せっかく教えて頂きましたが、結局外部ブログカード機能とカテゴリーページに独自のアイキャッチとメタディスクリプションを挿入するカスタマイズするのは難易度が高かったです。

      SEO的によいか分かりませんが、結局エントリーカードを挿入できるショートコードを作成して、まとめ記事を投稿し、内部ブログカード機能で対応することにしました。

      site_origine_page_builderなどを使えば簡単に実装できそうでしたがが、今回はプラグインを使わないようにfunctions.phpに追記しました。

      functions.phpに追記。

      function getNewPost($opt) {
        
        extract(shortcode_atts(array(
              'num' => '',
              'catid' => '',
              'tagid' => '25'
          ), $opt));
          
          $num = (!empty($num)) ? $num : 10;
        
        if($catid==''){  
          $args = array(
          'posts_per_page'   => $num,
          'orderby'          => 'date',
          'order'            => 'DESC',
          'post_type'        => 'post',
          'category__in' => $catid,
          'post_status'      => 'publish'
        );
       }else{
          $args = array(
          'posts_per_page'   => $num,
          'orderby'          => 'date',
          'order'            => 'DESC',
          'post_type'        => 'post',
          'tag__in'          => $tagid,
          'post_status'      => 'publish'
        );
       };
      
        $posts_array = get_posts( $args );
        
        $out = "";
        $out .= '<div id="list">';
        
        foreach ($posts_array as $post) {
          $id = $post->ID;
          $title = $post->post_title;
          $post_date = get_the_time( get_theme_text_date_format(), $id);
          $post_modified = $post->post_modified;
          $link = get_the_permalink($id);
          $article_ex = get_the_custom_excerpt($post->post_content, 70);
          $thumb = get_the_post_thumbnail(
                $id,
                'thumb150',
                array(
                  'class' => 'entry-thumnail wp-post-image',
                  'alt' => $title,
                                               'style'=>'width:150px;height:150px;'
                )
              );
          $category = get_the_category($id);
          
          foreach ($category as $cat) {
            $cat_id = $cat->cat_ID;
            $cat_name = $cat->name;
            $cat_link = get_category_link($cat_id);
            $cats[] = "<a href='".$cat_link."' rel='category tag'>".$cat_name."</a>";
          }
          $categorys = implode(", ",$cats);
          unset($cats);
      
      $out .= <<< EOD
       <article id={$id} class="entry cf entry-card post type-post status-publish format-standard has-post-thumbnail">
        <figure class="entry-thumb">
         <a class="entry-image entry-image-link" title={$title} href={$link}>
                        {$thumb}
         </a>
        </figure><!-- /.entry-thumb -->
      <div class="entry-card-content">
        <header>
         <a class="entry-image entry-image-link" title={$title} href={$link}>
          <div class="matome-card">{$title}</div>
         </a>
          <p class="post-meta">
                  <span class="post-date"><span class="fa fa-clock-o fa-fw"></span><span class="published">{$post_date}</span></span>     
                  <span class="category"><span class="fa fa-folder fa-fw"></span>{$categorys}</span>     
          </p><!-- /.post-meta -->
        </header>
        <p class="entry-snippet">{$article_ex}</p>
          <footer>
          <p class="entry-read"><a class="entry-image entry-image-link" title={$title} href={$link}>記事を読む</a></p>
        </footer>
        
        </div><!-- /.entry-card-content -->
       </article>
      <hr class="entry-sep">
      EOD;
      
        }
        $out .= "</div>"; //#list
        
        return $out;
      }
      add_shortcode('nplist', 'getNewPost');
      //
      

      style.css, amp.cssに追記

      div#list .entry-card-content div {
          font-size: 1.05em;
          line-height: 150%;
          color:#333;
          font-weight:bold;
      }
      div#list .entry-card-content header a.entry-image{text-decoration:none;}
      #list .entry {position: relative;margin-bottom: 0;}
      #list .entry  .entry-card-content  .post-meta {background-color: transparent;font-size:0.8em;}
      #list .entry  .entry-card-content  .post-meta .post-date {position: absolute;right: 0;bottom: 0;font-weight:bold;}
      #list .entry  .entry-card-content  .post-meta  .entry-snippet {display: none;}
      #list .entry  .entry-card-content  .post-meta .entry-read {position: absolute;left: 161px;bottom: 0;}
      #list .entry-sep {
          color: initial;
          width: 100%;
          display: block;
          height: 1px;
          background-color: #ccc;
          border: 0 solid transparent;
          margin: 15px 0;
          }

      投稿本文の例
      catid > カテゴリーid
      tagid > catidがなければタグidで
      num > 記事数
      [nplist catid="1" tagid="2" num="10"]

    • #52685
      アバター画像わいひら
      キーマスター

      ショートコードで実装されたんですね。
      コードは今後の参考にさせていただこうと思います。
      ありがとうございます。

4件の返信スレッドを表示中
  • このトピックに返信するにはログインが必要です。
スポンサーリンク
アドセンス(大)
アドセンス(大)