アイキャッチにマウスオーバーすると投稿タイトルを表示

WordPressのフォーラムから定期的に流入があるため、対応をいくつか探ってみました。トピックは、「サムネイルにマウスオーバーするとタイトルが表示されるようにしたい

ちなみに、投稿内のキャプション付き画像のパターンはこちら
画像マウスオーバーでキャプションを表示
上記事のように自作もできますが、jQueryのプラグインを使用してもいいかもしれません。

準備としてまとめてみました。
マウスオーバーでキャプション表示してくれる jQueryプラグイン

アイキャッチ画像のtitle属性を表示

「JQuery hover caption plugin」を使用してみます。
このプラグインは、imgタグのtitle属性を取り出してキャプション用の要素を作成してくれます。ダウンロード

アイキャッチ画像のtitle属性に投稿タイトルを

imgタグにtitle属性を復活したい」で紹介されているように、title属性が廃止されているようです。実際確認してみても入っていません。なので、投稿タイトルを埋め込みます。

<?php the_post_thumbnail( 'thumbnail', array( 'title' => trim(strip_tags( get_the_title() )) )); ?>
「STUDIO VOYAGE」さんの記事を参考にさせていただきました。
アイキャッチのalt・titleを投稿タイトルに

jQueryプラグイン

ダウンロードしたjQueryプラグインと初期化用スクリプトを読み込む。function.phpに追加して下さい。

function hovercaption(){
    wp_enqueue_script( 'hover-caption', '/js/jquery.hover_caption.js', array(), null, true );
    wp_enqueue_script( 'hover-caption-locad', '/js/hover_caption_load.js', array(), null, true );
}
add_action( 'wp_print_scripts', 'hovercaption');
//  hover_caption_load.js // 初期化用
$(document).ready(function() {
    $('img').hover_caption();
});

アイキャッチ下に要素を追加して表示

「HCaptions」を使用してみます。
キャプション用の要素を追加するパターンです。ダウンロード

アイキャッチ画像にキャプション用要素を追加

// サムネイルのclassにhcaptionを追加
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft hcaption')); ?>
// キャプション部分
<div class="cap-overlay">
    <h5><?php echo strip_tags( get_the_title()); ?></h5>
    <p>Content..</p>
</div>

jQueryプラグイン

ダウンロードしたjQueryプラグインと初期化用スクリプトを読み込む。function.phpに追加して下さい。function.phpに追加して下さい。
(サイトディレクトリ直下のjsディレクトリにjsファイルを設置)

function hcaptions(){
    wp_enqueue_script( 'hcaptions', '/js/jquery.hcaptions.js', array(), null, true );
    wp_enqueue_script( 'hcaptions-load', '/js/hcaptions_load.js', array(), null, true );
}
add_action( 'wp_print_scripts', 'hcaptions');
//  hcaptions_load.js
$(document).ready(function() {
    $('.hcaption').hcaptions({
        effect: "fade",
    });
}); 
  • このエントリーをはてなブックマークに追加

関連記事

Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」

このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi

ナビゲーションメニューに検索フォームを追加

メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく

Twenty Twelve カスタマイズ

何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。 目次 子テーマのつくりかた 他記事へのリンク アーカイブタイトル("カテゴリー別アーカ

「タグクラウド」ウィジェット カスタマイズ

タグクラウドは、管理画面ではあまりカスタマイズできません。必要であれば、フィルターフックやプラグインを用いて表示設定や概観の変更を行うことができます。 目次 出力をカスタマイズ 各タグの

Twenty Twelve 投稿日・投稿者を非表示に

TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に

Twenty Thirteen カスタマイズ

WordPress 3.6のデフォルトテーマである「Twenty thirteen」のカスタマイズをまとめて投稿します。 Twenty thirteenのカスタマイズネタがあまりないです。(それだけ

折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」

「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ

「続きを読む」(moreタグ)をカスタマイズ

WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、

no image

アップグレードで「更新を展開しています... 」のままになった場合の対処のひとつ

久々に出会ったような気がするのでメモです。 ローカルのテスト環境でWordPressを3.7から3.8にアップグレードしようとしたところ、「更新を展開しています... 」で止まってしまい更新処理がす

「All in One SEO Pack」を代替するための準備

「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑