現在位置: ホーム > 本文記事: [WordPress] 記事タイトルをマウスホバーでコンテンツを表示させる

[WordPress] 記事タイトルをマウスホバーでコンテンツを表示させる

2007年1月16日 火曜日 06時01分
E-Mail This Post/Page Print This Post/Page

複数のエントリー記事がリストされるトップページやカテゴリー、アーカイブなどのページで記事タイトルにマウスをホバーさせた時に、title 属性を利用して、コンテンツの一部を表示させる方法を紹介します。

テンプレート内の、<a>タグに囲まれた <?php the_title(); ?>を探し、その title="" の部分に記事内容を挿入します。

編集するファイルは使用しているテーマの index.php (トップページ) や、　archive.php　（月別・カテゴリー別　アーカイブ）を編集します。 Default の場合 index.php, archive.php.orig、 Easy All の場合は　index.php になるかと思われます。

注意点として、$post_title_length = 360; の360 の部分がコンテンツの長さになりますので、好みの数値を入れてください。

Default テンプレート の場合、

index.php 10行目

PHP:
  1. <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

archive.php の39行目

PHP:
  1. <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">

この、Permanent Link to <?php the_title(); ?>　の部分を以下のように書き換えます。

PHP:
  1. <?php
  2. // Title Insert Hack Begin
  3. $clean_spaces  = array("\r\n", "\n", "\r", '"' , "'");
  4. $post_title_length = 360;
  5. $post_title_insert = trim(str_replace($clean_spaces, '', strip_tags($post->post_content)));
  6. $post_title_insert = (mb_strlen($post_title_insert)> $post_title_length) ? mb_substr($post_title_insert, 0, $post_title_length, get_settings('blog_charset')) . '... ' : $post_title_insert;               
  7. echo $post_title_insert;
  8. // Title Insert Hack End
  9. ?>

EasyAｌｌ　の場合、

index.php 10行目あたり

PHP:
  1. <a href="<?php the_permalink() ?>" rel="bookmark">

この rel="bookmark" のすぐあと、 > の直前に、以下のコードをインサートします。

PHP:
  1. title="<?php
  2. // Title Insert Hack Begin
  3. $clean_spaces  = array("\r\n", "\n", "\r", '"' , "'");
  4. $post_title_length = 360;
  5. $post_title_insert = trim(str_replace($clean_spaces, '', strip_tags($post->post_content)));
  6. $post_title_insert = (mb_strlen($post_title_insert)> $post_title_length) ? mb_substr($post_title_insert, 0, $post_title_length, get_settings('blog_charset')) . '... ' : $post_title_insert;               
  7. echo $post_title_insert;
  8. // Title Insert Hack End
  9. ?>"

Share This

« 前の記事
クリックしてくださるとラブログのランクが上がります^^。　この記事は役に立ちましたでしょうか？

この記事に関連するトピック

Categories: Wordpress
Tags to This Post:

Trackback this Post | Feed on comments to this Post

 　

記事ヒット TOP 10

  1. [Wordpress][PHP] 表示速度をかなり向上させるちょっとしたコツ
  2. [WordPress] アーカイブを表示する隠し技
  3. [PHP] ファイル名から拡張子を取り除く関数
  4. [WordPress] トラックバックがとばない現象で
  5. [WordPress] WPページ内に任意の記事を表示させる方法
  6. [WordPress][Plugins] Get Random Search Terms 日本語版
  7. [WordPress][Plugins] GS nDA・Be・YA! 1.1　リリース！！
  8. [Wordpress] プラグイン DropCap First Character をカスタマイズ
  9. [WordPress][Plugins] Customizable Post Listings　をカスタマイズ
  10. [WordPress] 特定のカテゴリーに属する記事をトップに表示させない

WordPress Tips from Social Bookmarks Jp

    There is no entries available for this category.

WordPress Tips from Social Bookmarks

    There is no entries available for this category.

WordPress Plugins from Social Bookmarks

    There is no entries available for this category.

Tag Cloud

admin Admin Drop Menus Admin Memo Admin Panel advanced drop menus array unique blog cron dabeya Dagon Design Sitemap Generator dropcap Edit N Place error Feedburner game google hack html HTML CSS Internet NEWS Permalink Redirect PHP phpBB2 plugin RSS scripts search stattraq template the content Ultimate Tag Warrior Web Management Windows XP Wordpress WP Plugins WPページ 　拡張子 カスタマイズ カスタム関数 カテゴリー コード セキュリティ タグ トップページ トラックバック フィード 投稿 抜粋 日本語 時刻 時間 正規表現 表示 記事

サイト メニュー
Blogtimes image
ぱそずき　:D)‐く © 2008
Close
E-mail It