アイキャッチにマウスオーバーすると投稿タイトルを表示
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() )) )); ?>
アイキャッチの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 Tooltip」
「WordPress Tooltip」は、WordPressにツールチップを実装できるプラグインです。jQueryプラグイン「TipTip」を組み込んでいます。プラグインページの対応バージョンは古めで
-
-
Twenty Twelve カスタマイズ
何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。 目次 子テーマのつくりかた 他記事へのリンク アーカイブタイトル("カテゴリー別アーカ
-
-
新年早々やらかした
あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ
-
-
Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止
TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの
-
-
Twenty Fourteen 「投稿者」を非表示
TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて
-
-
画像マウスオーバーでキャプションを表示
メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。 今回
-
-
Twenty Twelve 投稿者情報を表示/非表示に
TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「
-
-
テーマ ブックマーク 2014
有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites
-
-
スライダー・ギャラリー プラグイン
WordPressにギャラリーが実装できるプラグインをまとめてみました。 順番はオススメ順です。 Simple Responsive Slider #ショートコード #テンプレート #ウ
-
-
折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」
「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ