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

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",
    });
}); 
  • このエントリーをはてなブックマークに追加

関連記事

Twenty Thirteen ナビゲーションメニューを固定

ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。 スクリプト 以下のjsファイルを用意して下さい。 nav要素のidは、ソースもしくはheade

no image

パーマリンク・スラッグなどURL カスタマイズ

管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可

no image

「固定ページ」ウィジェット カスタマイズ

「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ

titleタグ(wp_title) カスタマイズ

SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが

テーブル実装プラグイン「TablePress」 + レスポンシブ対応

「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり

画像マウスオーバーでキャプションを表示

メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。 今回

テーマ 「Responsive」 カスタマイズ

デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ

head内に出力される要素を整理

Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急

no image

Pocketボタンの設置

日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみました

Twenty Twelve "コメントをどうぞ"を消す

今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"|"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー

Message

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

*

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

    PAGE TOP ↑