2017年9月28日更新

関連記事のサムネイルサイズを変更する方法：賢威7

Thumbnail

賢威7 では、関連記事を表示するかどうかを管理画面から設定することができます。

プラグインを入れる必要もありませんし、管理画面から設定できるので何より簡単。記事ごと設定できるのも地味に便利ですよね。

サイト運営には関連記事は大事！ということで、今回は関連記事のサムネイルサイズを変更する方法を紹介したいと思います。

カスタマイズ前

↓ 最初の状態では関連記事のサムネイルは 100, 100 のサイズ

related-post-before

カスタマイズ後

サムネイルサイズと余白を変更

↓ サムネイルサイズを 90, 90 にして余白を調整

related-post-after

1. 関連記事用のサムネイルサイズを登録

最初の状態では、「新着記事（サイドバー）のサムネイル」と「関連記事のサムネイル」で同じサムネイルを使うように設定されています。

新着記事のサムネイルはそのままにしておきたいので、まずは functions.php で関連記事用のサムネイルサイズを登録しましょう。

119行目付近にサムネイルサイズを登録しているコードがあるので、ここに以下のコードを追加します。
（お使いのバージョンによって行数が変わるかもしれません）

PHP
コピーする
add_image_size( 'related_thumb', 90, 90, true );

ここでは 90, 90 の大きさにしましたが、お好みで変更して下さい。

keni-functions-register

2. 関連記事のサムネイルサイズを変更

次に、関連記事で使用するサムネイルサイズを先ほど登録したサムネイルサイズに変更します。

functions.php の790行目付近に

PHP
コピーする
//---------------------------------------------------------------------------
//  関連記事を表示する関数
//---------------------------------------------------------------------------

というコメントがあると思います。
その少し下の799行目付近に

PHP
コピーする
function get_relation_keni() {
...

という879行目まで続くコードも見つかると思います。

get-related-keni-before

この function get_relation_keni() を以下のコードで置き換えます。

PHP
コピーする
function get_relation_keni() {
    $relation = "";
    $link_count = 0;
    if(!is_home() && !is_front_page()) {
        $relation_data = get_post_meta(get_the_ID(),'relation', true);
        if ($relation_data != "") {
            $relation_lies = explode("n", $relation_data);         // 改行で区切る
            foreach ($relation_lies as $no => $relation_line) {
                $line_array = explode("t", $relation_line);// タブで区切る
                if (trim($line_array[0]) != "") {
                    $image =  ($line_array[3] != "") ? "<div class="related-thumb"><a href="".$line_array[1]."" title="".esc_attr($line_array[0])."" target="_blank"><img src="".$line_array[3]."" class="relation-image"></a></div>" : "";
                    if ($line_array[2] == "y") {
                        $relation .= "<li>".$image."<p><a href="".$line_array[1]."" title="".esc_attr($line_array[0])."" target="_blank">".esc_attr($line_array[0])."</a></p></li>n";
                    } else {
                        $relation .= "<li>".$image."<p><a href="".$line_array[1]."" title="".esc_attr($line_array[0])."" target="_blank">".esc_attr($line_array[0])."</a></p></li>n";
                    }
                    $link_count++;
                }
            }
        }
    }
    if ($link_count < 5) {
        // カテゴリから取得する   
        $category_relation = get_post_meta(get_the_ID(), 'category_relation', true);
        if (isset($category_relation) && $category_relation == "y") {
            $target_category = get_the_category(get_the_ID());
            if (isset($target_category) && is_array($target_category)  && count($target_category) > 0) {
                foreach ($target_category as $cat_val) {
                    $cat_list[] = $cat_val->cat_ID;
                }
            }
            if (isset($cat_list) && count($cat_list) > 0) {
                $args = array( 'posts_per_page' => 5,'category' => implode(",", $cat_list), 'orderby' => 'rand', 'exclude' => get_the_ID());
                $rand_posts = get_posts( $args );
                if (count($rand_posts) > 0) {
                    foreach ($rand_posts as $cat_posts) {
                        if ($link_count < 5) {
                            $image = (get_the_post_thumbnail($cat_posts->ID)) ? "<div class="related-thumb"><a href="".get_permalink($cat_posts->ID)."" title="".esc_attr($cat_posts->post_title)."" target="_blank">".get_the_post_thumbnail($cat_posts->ID, 'related_thumb', array('class' => 'relation-image', 'alt' => esc_attr($cat_posts->post_title)))."</a></div>" : "";
                            $relation .= "<li>".$image."<p><a href="".get_permalink($cat_posts->ID)."" title="".esc_attr($cat_posts->post_title)."">".esc_attr($cat_posts->post_title)."</a></p></li>n";
                            $link_count++;
                        }
                    }
                }
            }
        }
    }
    if ($link_count < 5) {
        // タグから取得する 
        $tag_relation = get_post_meta(get_the_ID(), 'tag_relation', true);
        if (isset($tag_relation) && $tag_relation == "y") {
            $target_tags= get_the_tags();
            if (isset($target_tags) && is_array($target_tags) && count($target_tags) > 0) {
                foreach ($target_tags as $tag_val) {
                    $tag_list[] = $tag_val->term_id;
                }
            }
            if (isset($tag_list) && count($tag_list) > 0) {
                query_posts(array('tag__in' => $tag_list, 'showposts' => 5, 'post__not_in' => array(get_the_ID())));
                if (have_posts()) : while(have_posts()) : the_post();
                    if ($link_count < 5) {
                        $image = (get_the_post_thumbnail(get_the_ID())) ? "<div class="related-thumb"><a href="".get_permalink(get_the_ID())."" title="".esc_html(get_the_title())."" target="_blank">".get_the_post_thumbnail(get_the_ID(), 'related_thumb', array('class' => 'relation-image', 'alt' => esc_html(get_the_title())))."</a></div>" : "";
                        $relation .= "<li>".$image."<a href="".get_permalink()."" title="".esc_html(get_the_title())."">".esc_html(get_the_title())."</a></p></li>n";
                        $link_count++;
                    }
                    endwhile;endif;
                }
            }
            wp_reset_query();
    }
    return (!empty($relation)) ? "<div class="contents related-articles related-articles-thumbs01">n<h2 id="keni-relatedposts">".sprintf( __('Related Posts','keni'))."</h2>n<ul class="keni-relatedposts-list">n".$relation."</ul>n</div>n" : "";
}

置き換えたコードは、842行と868行の2箇所変更したんですが、どちらも

PHP
コピーする
...get_the_post_thumbnail(..., 'ss_thumb',...)...

というコードを

PHP
コピーする
...get_the_post_thumbnail(..., 'related_thumb',...)...

に変更しています。
これで関連記事のサムネイルが、先ほど登録した related_thumb （90, 90 の大きさ）になりました。

3. Regenerate Thumbanils でサムネイルをリサイズ

上でサムネイルのサイズを登録し直しましたが、このままではコード編集前に登録されたサムネイルは元の大きさのままです。

サムネイルサイズがバラバラだと、さすがに見た目が悪いので、Regenerate Thumbanils というプラグインを使ってサムネイルをリサイズしましょう。

https://wordpress.org/plugins/regenerate-thumbnails/

regenerate-thumbnail

「ツール」 → 「Regen. Thumbnails」

から「すべてのサムネイルを再生成する」 を選択すると、100, 100 だったサムネイルが 90, 90 で再生成されます。

↓ サムネイルサイズが 90, 90 になった

related-post-after-php

4. CSSで余白を調整

最後にCSSで余白を調整しましょう。

以下のコードを親テーマ（賢威7自体）の base.css や、子テーマの style.css などお好みのCSSファイルに追加します。

CSS
コピーする
.related-articles-thumbs01 .related-thumb {
    margin-right: 10px;
    margin-bottom: 10px;
}

これで完成です！

↓ 違いが分かりにくいかもしれませんが、ちゃんとリサイズされて、余白も狭くなっています。

related-post-after

関連記事を設定無しで表示させる方法は下の記事で紹介しているので、よかったらどうぞ〜

賢威7の関連記事を設定無しで表示させる方法

Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.