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

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

関連記事

ウィジェット関連のカスタマイズ・プラグイン

リンクマネージャー WordPress 3.5バージョンアップ以降にリンクマネージャーを追加するには以下のフィルタを設定もしくはプラグインをインストールして下さい。 プラグイン Link M

jQueryをCDNから読み込む

WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0

Twenty Fourteen 「投稿者」を非表示

TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて

「最近のコメント」ウィジェットをカスタマイズ

「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除

「カテゴリー」ウィジェット カスタマイズ

「カテゴリー」ウィジェットは、管理画面ではあまりカスタマイズできません。必要であれば、フックやプラグインを用いて表示設定などの変更を行うことができます。 目次 「カテゴリー」ウィジェットの追加

no image

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

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

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

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

Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更

標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです

ie.cssの子テーマ化など Twenty Twelve 1.1での変更点

TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"

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

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

Message

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

*

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

    PAGE TOP ↑