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

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

関連記事

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

no image

ソーシャルボタン設置 プラグイン

各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe

jQueryをCDNから読み込む

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

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

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

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

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

Twenty Fourteen "コメントをどうぞ"の非表示と変更方法

Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場

no image

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

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

ログイン画面・機能をカスタマイズ

CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.

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

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

Twenty Fourteenカスタマイズ用プラグインと派生テーマ

WordPressの現在のデフォルトテーマ「Twenty Fourteen」のカスタマイズに便利なプラグインと、「Twenty Fourteen」をもとに作成されたテーマのまとめです。 カスタマ

Message

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

*

PAGE TOP ↑