[WordPress]ブログ内の関連記事をGetTabInfoで作る方法

コードを「functions.php」に

まずはこちらをfunctions.phpの中にコピペして下さい。

一番下でいいです! functions.phpの場所は
[ ファイル ] → [ wp-content ] → [ themes ] → [ テーマ名 ]の中です!

/* ■ 追記: 関連リンクのアイキャッチ取得
--------------------------------------- */
function get_my_thumbnail( $atts, $post_url = null )
{
return wp_get_attachment_url(get_post_thumbnail_id(url_to_postid($post_url)));
}
add_shortcode('my_thumbnail', 'get_my_thumbnail');


GetTabInfoにコードを入れる

こちらがGetTabInfoのテンプレート用コードです。

<div class="shareHtmlAll"><a href="%%URL%%"><img class="shareHtmlAll-img" src="[my_thumbnail]%%URL%%[/my_thumbnail]" alt="%%TITLE%%" width="140" /></a><p class="shareHtmlAll-title"><a href="%%URL%%">%%TITLE%%</a></p></div>


当たり前ですが、自分のブログ記事を紹介するときしかサムネイル画像は取得できません。

記事ページじゃないとアイキャッチ画像を取得できません（カテゴリページなどではできないということ）。

CSSコードを入れる

CSSコードはこちらです。


.shareHtmlAll{ 
    clear : both ;
    width : 75% ;
    height : auto ;
    margin : 1em 0 1em 2em ;
    box-shadow: 0 1px 2px rgba(100, 100, 100, 0.3)inset;
    border: 1px solid #DADADA;
    border-top: 1px solid #757575;
    border-radius: 4px;
    position : relative ;
    zoom : 1 ;
    }
 
.shareHtmlAll-img {
    float : right ;
    }
 
.shareHtmlAll a {
    color : #333 ;
    }
 
.shareHtmlAll a:hover {
    background : #F7F7F7 ;
    }
 
.shareHtmlAll-title {
    font-size : 60% ;
    width : 100% ;
    margin : 0 ;
    }
 
.shareHtmlAll-title a {
    display : block ;
    min-height : 100px ;
    padding : 7% 5% 2% 5% ;
    line-height : 1.5 ;
    font-size : 120% ;
    text-decoration : none ;
    }
 
.shareHtmlAll p:empty {
    display : none ;
    }

@media screen and (max-width: 500px) {
    .shareHtmlAll{
        width : 100% ;
        margin-left : 0 ;
        }
    }

【追記】OPENCAGEのテーマの方はこちらも追記

OPENCAGEのWordPressテーマを使っている方はこちらも追記するといいです!


.entry-content .shareHtmlAll-title {
    margin-bottom : 0 ;
    }

.entry-content .shareHtmlAll-img {
    margin-bottom : 0 ;
    }


GetTabInfo用のコード

こちらをGetTabInfoのテンプレート登録してください。

<li><a href="%%URL%%" target="_blank">%%TITLE%%</a></li>


最後に取得したHTMLタグを<ul>と</ul>で囲むのをお忘れなく!

GetTabInfo用のコード

<dt>%%TITLE%%</dt><dd><a href="%%URL%%" target="_blank">%%URL%%</a></dd>


最後に取得したHTMLタグを<dl>と</dl>で囲むのをお忘れなくっ!