Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › カテゴリーページのブログカードにアイキャッチや説明を挿入したい
-
投稿者投稿
-
-
2017年5月6日 8:32 AM #52307
koiitirou2
ゲストこんにちわ。
いつも楽しく使わせて頂いています。
カテゴリーページのURLを記事中に挿入してブログカードを表示したいと思っています。
AMP表示の問題があるのでsimplicityデフォルトのブログカードを使いたいと思っています。アイキャッチと説明が一定なのでカスタマイズしたいと思っていますが、
なにか方法はあるでしょうか?
ヒントだけでも頂ければ幸いです。 -
2017年5月6日 5:17 PM #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; }これを、子テーマに貼り付けて、カテゴリページ専用の動作を付け加えれば、多分できます。
-
2017年5月6日 8:57 PM #52322
koiitirou2
ゲストいつもありがとうございます。
もし実装できたらご報告させて頂きます。 -
2017年5月23日 12:09 AM #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"] -
2017年5月23日 4:37 PM #52685
わいひらキーマスターショートコードで実装されたんですね。
コードは今後の参考にさせていただこうと思います。
ありがとうございます。
-
-
投稿者投稿
- このトピックに返信するにはログインが必要です。