アイキャッチにマウスオーバーすると投稿タイトルを表示
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", }); });
関連記事
-
「固定ページ」ウィジェット カスタマイズ
「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ
-
テーブル実装プラグイン「TablePress」 + レスポンシブ対応
「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり
-
Twenty Fourteen 「投稿者」を非表示
TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて
-
titleタグ(wp_title) カスタマイズ
SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが
-
アバターサイズの変更など Twenty Twelve 1.3での変更点
Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel
-
新年早々やらかした
あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ
-
「最近のコメント」ウィジェットをカスタマイズ
「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除
-
独自のCSSやJSを読み込む
WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみまし
-
ナビゲーションメニューに検索フォームを追加
メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく
-
Twenty Fifteen テーマ用フォント "Noto" / "Inconsolata"の使用を止
TwentyFifteenでは、テーマ用のフォントとして「Noto」と「Inconsolata」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどのようなフォント