WordPress新着5記事のサムネイル画像リンクをヘッダー部分に横に並べるプラグイン(人柱版)作りました【人柱版第2版リリース】

この記事は約3分で読めます。
記事内に広告が含まれています。

サムネイル画像ナビゲーション

個人的にも導入したかったのですが、必要性に迫られて作っているのですが、どうせなら、といことでプラグイン化前提で作り始めました。
これは最近のブログのいくつかでもよく使われている機能、ヘッダー部分にブログ記事に使われている画像のサムネイルを表示し、それを横に並べてリンクにしている表現、それを実現するプラグインです。

このエントリーを以て、人柱版ということで配布を始めます(実際にはプラグイン名称を変えたり、管理画面をつけたり、カスタマイズ機能などを盛り込みます。)
使っていただける方の意見やアイデアなどを受けながら開発を進めていきたいと思います。今年のお盆の課題です。


ダウンロード

thumb-picture-menu

2012/8/11 16:13人柱版第2版update:thumb-picture-menu2

  • プラグイン名の変更
  • サムネイル画像に枠線の追加
  • 画像サイズの微調整(ゆくゆくは管理画面で調整できるようにします)
  • 記事タイトルを取得して25文字で切れるようにした(「タイトル末尾に「…」を追加」
  • ほんの少しだけソース整理(まだゴミだらけ。不要なCSSファイルなどがあります)

使い方

誠に恐縮ですが、人柱版の内は、管理画面が一切無いのでいくつか手で修正していただく場所があります。

  1. プラグインをインストールして有効化
  2. テーマファイルで該当サムネイル画像リンクメニューを挿入したい場所を選び下記関数を記入してください。
    <?php thumbpicturemenu(); ?>
  3. 上記で表示されると思いますが、画像サイズを修正しないとそれっぽく表示されないと思うので微調整してください(少しスタイルシートに対する知識が必要です)
    プラグインファイルのthumb-picture-menu.phpを開き下記部分の数字を修正してください

[css].thumbpicturemenu {
position: absolute;
bottom: 7px;
width:176px;
left: 4px;
text-align: left;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#333333));
background: -moz-linear-gradient(transparent 0pt, #333333 100%);
padding: 4px;
color: white;
}[/css]

上記の「width:176px;」の176pxというのがサムネイル画像のサイズを表していますが、まだソースを整理し切れていないので、その後にも同じ176pxという数字が出てくるimgタグがあるのでそこも修正しておいてください。

というか、この辺のスタイルシートをゴリゴリかけば、そこそこカスタマイズできます。でもそれをやっちゃうとプラグインにしたという意味がないというオチが待っていますw

人柱版ということで、今後プラグインの名称が変わったり、関数やスタイルシート名が大幅に変わる可能性もあり得ます(プラグインの名称は変わると思います)。継続的に使われる方はその点をご注意ください。

今後の予定

  • 画像メニューのサイズを管理画面で設定できるようにする
    (全体の横幅とひとつひとつのサイズ、余白、枠線、その色・・・etc)
  • 最新記事だけでなくカテゴリの記事を読んでいる時はそのカテゴリ最新記事を表示させる
  • 公式プラグインディレクトリに登録してプラグインの自動アップデート機能が使えるようにする

要望・ご意見などを頂ければ、出来るだけ開発してみたいと思います。
このプラグインによってブログのデザインを変える大きなきっかけになりそうです。

コメント

タイトルとURLをコピーしました