なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

WordPressプラグイン「SimilarPosts」と「PopularPosts」にサムネイル画像とはてブを付ける方法

Sponsored Links


スクリーンショット 2012 10 25 14 09 55


いろいろな記事を参考にしていろいろ弄ってたらできたっていう完全に自分の備忘録エントリーです。
全く不完全なのでソースと参考記事だけ書いておきます。
コードを弄る時ってこんがらがってくるので、自分的2012.10.25現在の記録です。

Sponsored Links


設定→「SimilarPosts」を選択して「Output」を選択すると以下。
(PopularPostsも製作者が同じなので設定画面はほとんど一緒)

スクリーンショット 2012 10 24 23 36 38



↑ このテンプレートをカスタマイズすることで自分の好きなように表示ができる。
これが基本。

サムネイル画像を表示

私の冒頭に載せたスクショのサムネイルを表示するために「SimilarPosts」の上記テンプレートに書いたコードはこちら。

[html]

{php: echo get_the_post_thumbnail( {postid}, array(80,80) ); }

{title}

[/html]

cssはこちら。

[html]

/* Similar Post */

.similar-img img{
float:left;
border: 1px solid #ddd ;
border-radius: 4px;
margin: 0px 20px 0px -30px ;

}

.similar-posts {
float:left;
}

.similar-posts a {
font-size: 15px;
border-bottom: 1px solid #ddd ;
}

[/html]

完全にcssをわかってない人の書き方なのは承知してるのですがなんとかこんな感じで表示できてます。

参考にさせていただいた記事はこちら。

関連記事のプラグインSimilar Postsでサムネイル表示がうまくいく方法 | ウェビメモ

WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する

WordPressで「Similar Posts」のサムネイルを正しい比率で表示させる方法 | 男子風呂(ぐ)

はてブを表示(テキストで)

header.php の </head> 以前に以下のコードを入力。

[html]

[/html]

上記コードを入れることでテキストではてブ表記ができるようになる。
参考記事は以下、というかこちらを読まないとさっぱりわからないと思う。

先日書いた”はてブ数”をテキスト表示するJavaScriptがカッチョ悪かったのでシンプルに書きなおしてみた。 | 和洋風KAI

読んでも最初全く意味がわからなくて今もほとんどわかってないけれど、なんとかSimilarPosts(PopularPosts)で表示できてるのでコピペで使わせて貰ってます。

一応上述したコードのコピペと微調整で以下のように(SimilarPosts)表示できるのではないかと。

スクリーンショット 2012 10 25 14 09 55



↑ 記事の最後にこんな感じで表示。

ただ、記事の一番下に挿入する(SimilarPosts)かサイドバーに挿入する(PopularPosts)かで「ul」とか「li」とかでたぶんいろいろ変わってくるはず。
このブログに関してもその通りで、全く同じコードで書けているわけではないです。
ってことでPopularPostsのコードも記載しておきます。

PopularPostsのコード

同様に、設定→「PopularPosts」を選択して「Output」を選択。
コードはこちら。

[html]

  • {title}

  • [/html]

    ど素人コードですみません。
    cssは以下。

    [html]

    /* Popularposts+のプラグイン */
    .ppimg {
    width: 80px ;
    max-height: 80px ;
    float:left;
    margin: 0 10px 0px 0 ;
    overflow:hidden;
    border-radius: 6px;
    }

    .pptext {
    font-size: 13px;
    }

    .popposts {
    height: auto;
    }

    [/html]

    上記コードで表示されているのが以下のサイドバーでの表示。

    スクリーンショット 2012 10 25 0 32 00

    とりあえず、現状はこんな感じでサムネイルとはてブを表示している感じ。

    なぜこんなよくわかってない状態で書いたか

    疑問もまだまだありすぎるし、納得いってない部分も多々あります。
    そして、一応WordPressはローカルに保存してMAMPってソフトでも弄ってはいます。
    でもね、ローカル環境だとプラグイン関連はきちんと表示してくれないんですよね。
    レンタルサーバーに上げて公開していてきちんと公開されていてもローカル環境では表示されない。
    このSimilarPosts」も「PopularPosts」もまさにそうで(知らないだけなら誰か教えてください)、実際にブラウザに表示しながらカスタマイズしなければならない。
    cssだけでも先にサーバーに上げておいたらちょっとは見栄え的にも違いますしね。
    もしかしたら役に立つ人もいるかもしれないしって思いで書いてみました。

    Sponsored Links


    LEAVE A REPLY

    *
    *
    * (公開されません)

    Return Top