アイキャッチにマウスオーバーすると投稿タイトルを表示
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", }); });
関連記事
-
Pocketボタンの設置
日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみました
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
head内に出力される要素を整理
Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急
-
Twenty Thirteen ナビゲーションメニューを固定
ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。 スクリプト 以下のjsファイルを用意して下さい。 nav要素のidは、ソースもしくはheade
-
Twitterのツイートボタンの設置
Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式
-
RSS/Atomフィード カスタマイズ
RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿:投稿のフィード @全てのページ サイトのコメント:
-
Google+ プラスワン(+1)ボタンの設置
Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式
-
「編集(Edit)」リンクの非表示方法
ログインした状態で投稿ページを開くと投稿内や各コメントに各編集ページへリンクしてくれる「編集」リンクが表示されます。(繰り返し言いますが、自サイトにログインしているユーザにしか見えません。) こ
-
ソーシャルボタン設置 プラグイン
各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe
-
Twenty Twelve 投稿者情報を表示/非表示に
TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「