アイキャッチにマウスオーバーすると投稿タイトルを表示
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", }); });
関連記事
-
Twenty Fourteenカスタマイズ用プラグインと派生テーマ
WordPressの現在のデフォルトテーマ「Twenty Fourteen」のカスタマイズに便利なプラグインと、「Twenty Fourteen」をもとに作成されたテーマのまとめです。 カスタマ
-
Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」
Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google
-
コメントフォーム・リストのカスタマイズ
コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ
-
テーマ ブックマーク 2014
有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites
-
Twenty Fifteen カスタマイズ
WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと
-
Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更
標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです
-
Pocketボタンの設置
日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみました
-
テーブル実装プラグイン「TablePress」 + レスポンシブ対応
「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり
-
Twenty Eleven カスタマイズ
目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更
-
"コメントを残す" 削除・文言を変更する方法
コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹