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

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

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

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

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

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

Twenty Fifteen テーマ用フォント "Noto" / "Inconsolata"の使用を止

TwentyFifteenでは、テーマ用のフォントとして「Noto」と「Inconsolata」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどのようなフォント

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

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

Twenty Fifteen カスタマイズ

WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと

Twenty Twelve "Open Sans"の使用を止

「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば

「カレンダー」ウィジェット カスタマイズ・プラグイン

目次 カレンダー移動をajax遷移させるようにする 営業日・休業日を色分けして表示 ページやウィジェットにgoogleカレンダーを追加 カレンダーウィジェットをajax遷移させるよ

no image

Pocketボタンの設置

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

Twenty Fourteen 「投稿日」や"先頭固定表示"を非表示

日付を表示する部分は、全てtwentyfourteen_posted_onに集約されています。該当部分をコメントアウトしたかたちで子テーマのfunctions.phpに追加して下さい。 「投稿日

Message

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

*

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

PAGE TOP ↑