アイキャッチにマウスオーバーすると投稿タイトルを表示
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", }); });
関連記事
-
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
-
ポップアップが実装できるプラグイン「Anything popup」「Easy Modal」
ポップアップ 「Anything Popup」 「Anything popup」は、ページにポップアップが実装できるWordPressプラグインです。ポップアップ要素を投稿ページと同様に作成できるた
-
-
「Contact Form 7」 メッセージの送信に失敗~
この修正はWordPress 3.5で行われているようです。(~3.4.2) Contact Form 7で以下のエラーメッセージが出る場合は、確認してみて下さい。 「メッセージの送信に失敗
-
-
Twenty Fourteen 「投稿者」を非表示
TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて
-
-
パーマリンク・スラッグなどURL カスタマイズ
管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可
-
-
Twenty Twelve "Open Sans"の使用を止
「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば
-
-
独自のCSSやJSを読み込む
WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみまし
-
-
Twenty Twelve 投稿者情報を表示/非表示に
TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「
-
-
Twenty Ten カスタマイズ
Twenty Tenのカスタマイズについてのまとめです。 目次 コンテンツナビゲーション 非表示 「投稿日」を非表示 「作成者(投稿者)」を非表示 "コメントをどうぞ"("leave a
-
-
ログイン画面・機能をカスタマイズ
CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.