タグ: Tips

  • WordPressの投稿サムネイル画像(アイキャッチ画像)の使い方

    WordPressの機能、投稿サムネイル画像(アイキャッチ画像)の使い方をご紹介。

    使い方

    まず、投稿編集画面に投稿サムネイル画像(アイキャッチ画像)を表示するために以下のコードをfunctions.phpに追加します。

    [php]
    /** 投稿サムネイル画像(アイキャッチ画像)を表示 */
    if ( function_exists( ‘add_theme_support’ ) )
    add_theme_support( ‘post-thumbnails’ );
    [/php]

    これで編集画面で投稿サムネイル画像(アイキャッチ画像)のインターフェイスが有効になります。

    次に、投稿一覧にもサムネイル画像を表示するために以下のコードをfunctions.phpに追加します。

    [php]
    /**投稿一覧にサムネイルを表示 */
    if ( !function_exists(‘fb_AddThumbColumn’) && function_exists(‘add_theme_support’) ) {

    // for post and page
    add_theme_support(‘post-thumbnails’, array( ‘post’, ‘page’ ) );

    function fb_AddThumbColumn($cols) {

    $cols[‘thumbnail’] = __(‘Thumbnail’);

    return $cols;
    }

    function fb_AddThumbValue($column_name, $post_id) {

    $width = (int) 35;
    $height = (int) 35;

    if ( ‘thumbnail’ == $column_name ) {
    // thumbnail of WP 2.9
    $thumbnail_id = get_post_meta( $post_id, ‘_thumbnail_id’, true );
    // image from gallery
    $attachments = get_children( array(‘post_parent’ => $post_id, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’) );
    if ($thumbnail_id)
    $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
    elseif ($attachments) {
    foreach ( $attachments as $attachment_id => $attachment ) {
    $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
    }
    }
    if ( isset($thumb) && $thumb ) {
    echo $thumb;
    } else {
    echo __(‘None’);
    }
    }
    }

    // for posts
    add_filter( ‘manage_posts_columns’, ‘fb_AddThumbColumn’ );
    add_action( ‘manage_posts_custom_column’, ‘fb_AddThumbValue’, 10, 2 );

    // for pages
    add_filter( ‘manage_pages_columns’, ‘fb_AddThumbColumn’ );
    add_action( ‘manage_pages_custom_column’, ‘fb_AddThumbValue’, 10, 2 );
    }
    [/php]

    これで投稿一覧にもサムネイル画像が表示されるようになります。これで、どの画像をアイキャッチ画像として設定しているのかが一目瞭然になります。

    設定したサムネイル画像(アイキャッチ画像)をテンプレート内で利用する

    サムネイル画像(アイキャッチ画像)を表示する

    ループ内で設定したサムネイル画像(アイキャッチ画像)を呼び出したいときは以下のコードで出力・表示します。

    the_post_thumbnail

    [php]
    <?php the_post_thumbnail(); ?>
    [/php]

    サムネイル画像(アイキャッチ画像)の有無で処理を分岐させる

    以下の関数はサムネイル画像(アイキャッチ画像)が設定してある時とない時とで異なる結果を出力したいときに使います。

    has_post_thumbnail

    [php]
    <?php
    if ( has_post_thumbnail() ) {
    // サムネイル画像(アイキャッチ画像)が設定されているときの処理
    } else {
    // サムネイル画像(アイキャッチ画像)が設定されていないときの処理
    }
    ?>
    [/php]

    この機能を使えばエントリー毎にサムネイルを表示したりすることが出来るようになります。

    注意事項

    以上の機能はWordPress 2.9から実装された機能です。

  • Twitterをブログに表示する方法

    このブログにも現在、Twitterでの最新の発言を表示させているのですが、その方法とTwitter活用術の場所がわかりづらかったのでメモ的なエントリーになります。

    Twitterの最新の発言の表示方法

    以下のコードをTwitterの発言を表示させたい場所に挿入します。

    [html]
    <ul id="twitter_update_list"></ul>
    [/html]

    そして、次のコードを</body>よりも手前に挿入しておきます。

    [javascript]
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/you2u.json?callback=twitterCallback2&amp;count=1"></script>
    [/javascript]

    解説

    • you2u.jsonのyou2uの部分は各自Twitterのユーザーネームに置き換えてください。
    • この場合だと、最新の発言を1つだけ表示させるようになっているので例えば最新の5件を表示させたい場合はcount=1の部分をcount=5に書き換えてください。

    以上の方法でTwitterの発言をサイトの表示することができるようになります。
    CSSでのスタイリングも可能なところが良いですね。

    表示方法その2

    次の方法でも同じようにTwitterの発言をサイトに表示させるコードを取得することができます。

    1. Twitter / あなたのサイトにウィジットを貼りましょう!にアクセスして「Other」を選択後、「続く」クリックします。
    2. HTMLウィジェットを選択後「続く」クリック。
    3. Number of tweetsで表示件数、タイトル名及びタイトルの有無を決定後、生成されたコードをTwitterの発言を表示させたい場所に挿入します。

    Twitter活用術

    他にもTwitter活用術には「ツイートボタン」や「ウィジェット」、「Twitterボタン」といったものもあります。

    ツイートボタンはこのブログでも取り入れを検討中です。

  • MagpieRSSで外部RSSを表示

    ブログは外部のブログサービスを使っているんだけど自分のサイトにブログの更新情報を表示させたい。

    そんな時に使えるのが『MagpieRSS』です。

    MagpieRSSは外部のRSS Feedを取得して解析、そしてキャッシュまでしてくれるPHPで使えるRSSパーサーです。RSS0.9とRSS1.0、RSS 1.0のモジュールとRSS 2.0、Atomの一部に対応しています。

    MagpieRSSの使い方

    例えばindex.phpにブログの更新情報を表示させる場合。

    1. MagpieRSS(magpierss-0.72.tar.gz)をダウンロードして解凍。
    2. rss_cache.inc、rss_fetch.inc、rss_parse.inc、rss_utils.incの4つのファイルとextlibフォルダをindex.phpと同じディレクトリにアップロード。
    3. index.phpのディレクトリの下にcacheという名前でディレクトリを作成パーミッションを777に変更。
    4. index.phpのブログの更新情報を表示したい位置に以下のコードを記入します。

    [php]
    <?php
    error_reporting(E_ERROR); //エラーレポートを表示しない
    require_once ‘magpie/rss_fetch.inc’;
    $url = ‘RSSFeedのURL’; //RSS FeedのURL
    if($rss = fetch_rss($url)){ /RSS Feedがなければ終了
    $title = $rss->channel[‘title’];
    $title = mb_convert_encoding($title, "UTF-8", "auto");
    echo "<h4>$title</h4>\n";
    $rss->items = array_slice($rss->items, 0, 5); //RSS Feedの表示件数
    echo "<ul>";
    foreach ($rss->items as $item ) {
    $title = $item[title];
    $title = mb_convert_encoding($title, "’UTF-8", "auto");
    $url = $item[link];
    echo "<li>$title</li>\n";
    $description = $item[description];
    $description = mb_convert_encoding($description, "’UTF-8", "auto");
    echo "<li>$description</li>\n";
    };
    echo "</ul>";
    }
    ?>
    [/php]

    解説

    [php firstline=”4″]
    $url = ‘RSSFeedのURL’;
    [/php]
    ここに表示させたいRSS FeedのURLを記入してください。

    [php firstline=”9″]
    $rss->items = array_slice($rss->items, 0, 5);
    [/php]
    この場合だと最新から0件目までは非表示、その後の5件を表示します。

    MagpieRSSの文字化け対策

    一部のRSSが激しく文字化けすることがあるのでrss_fetch.incの358行目をISO-8859-1からUTF-8に変更します。

    本文が全部表示されるんですけど

    RSS Feedでエントリー内容を全文表示にしている場合、「$description」だと全文表示されてしまいます。

    「いやいや、エントリーの最初の何文字かだけでいいんだよ。」と仰る方は以下のコードを試してみてください。

    [php]
    <?php
    error_reporting(E_ERROR); //エラーレポートを表示しない
    require_once ‘magpie/rss_fetch.inc’;
    $url = ‘RSSFeedのURL’; //RSS FeedのURL
    if($rss = fetch_rss($url)){ /RSS Feedがなければ終了
    $title = $rss->channel[‘title’];
    $title = mb_convert_encoding($title, "UTF-8", "auto");
    echo "<h4>$title</h4>\n";
    $rss->items = array_slice($rss->items, 0, 5); //RSS Feedの表示件数
    echo "<ul>";
    foreach ($rss->items as $item ) {
    $title = $item[title];
    $title = mb_convert_encoding($title, "’UTF-8", "auto");
    $url = $item[link];
    echo "<li>$title</li>\n";
    $description = $item[description];
    $description = mb_convert_encoding($description, "’UTF-8", "auto");
    $description = strip_tags($description);
    $description = ereg_replace("(\r\n|\r|\n)", "", $description);
    $description = mb_substr($description, 0, 100). "…"; ?>
    echo "<li>$description</li>\n";
    };
    echo "</ul>";
    }
    ?>
    [/php]

    解説

    [php]
    $description = strip_tags($description);
    [/php]
    HTMLタグを取り除いています。

    [php]
    $description = ereg_replace("(\r\n|\r|\n)", "", $description);
    [/php]
    改行を取り除いています。

    [php]
    $description = mb_substr($description, 0, 100). "…"; ?>
    [/php]
    この場合だと、文字列「$description」の最初から100文字目までを最後に「…」を付けて表示します。

    PRとかADとかも表示されるんですけど…

    外部のブログサービスのRSS Feedを読み込むとPRとかADとか広告も一緒に表示されてしまったりします。Amebaブログとか。
    「そんなのはいらん!」と仰る方は以下のコードを試してみてください。

    [php]
    <?php
    error_reporting(E_ERROR); //エラーレポートを表示しない
    require_once ‘magpie/rss_fetch.inc’;
    define(‘MAGPIE_OUTPUT_ENCODING’, ‘UTF-8’);
    $url = ‘RSS FeedのURL’; //RSS FeedのURL
    if($rss = fetch_rss($url)){ //RSS Feedがなければ終了
    $title = $rss->channel[‘title’];
    echo "<h2>$title</h2>\n";
    $rss->items = array_slice($rss->items, 0, 6); //RSS Feedの表示件数
    echo "<ul>\n";
    foreach ($rss->items as $item ) {
    $title = $item[title];
    $date = Date("Y.m.d",$item[date_timestamp]);
    $url = $item[link];
    if (strstr($item[link],"表示したいブログのURL") == false) { //特定のURL以外は表示しない
    echo "";
    }
    else {
    echo "<li>$date <a href=\"$url\">$title</a></li>\n";
    }
    };
    echo "</ul>";
    }
    ?>
    [/php]

    解説

    [php firstline=”9″]
    $rss->items = array_slice($rss->items, 0, 6);
    [/php]
    Amebaブログ場合だと5件に1件の割合で広告が入ってくるので5件表示させたい場合は6件分表示させときます。

    [php firstline=”15″]
    if (strstr($item[link],"表示したいブログのURL") == false) {
    [/php]
    ここに記入したURLのRSS Feedだけを表示します。

    関連サイト

  • CSS3の border-radius で角丸を表現

    今まで画像を使って表現していた角丸を簡単に表現できてしまうプロパティが border-radius です。
    ということで使い方の紹介。

    デモページ

    今現在はOperaは border-radius、 Safari、Google Chrome は -webkit-border-radius、Firefox は -moz-border-radius と指定するようになってます。
    残念ながら IE は border-radius による角丸は表現できません…

    まずは全てまとめて10pxの角丸を指定してみます。

    Example1:

    [css]
    .example1 {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }
    [/css]

    各角を別々に指定する場合は以下のように指定します。

    Example2:

    [css]
    .example2 {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 40px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 40px;
    }
    [/css]

    borderの要素を変えることも出来ます。
    ※全てまとめて10pxの角丸を指定しています。

    Example3:

    [css]
    .border1 {
    border: 5px solid #CCC;
    }
    .border2 {
    border: 5px dotted #CCC;
    }
    .border3 {
    border: 5px dashed #CCC;
    }
    .border4 {
    border: 5px double #CCC;
    }
    .border5 {
    border: 5px groove #CCC;
    }
    .border6 {
    border: 5px inset #CCC;
    }
    .border7 {
    border: 5px ridge #CCC;
    }
    .border8 {
    border: 5px outset #CCC;
    }
    [/css]

    どうしても IE で角丸を表現したい場合はJavascript等で実装させます。

    border-radius.js – JavaScript ライブラリー – HTML5.JP

    ※IE8には未対応みたいです。

    Curved corner (border-radius) cross browser | HTML Remix

    ※IE6, 7, 8に対応しています。

  • floatさせた子要素が親要素からはみ出す現象を回避する

    Webサイトを制作していて、親要素に背景色などを指定し、その子要素をfloatさせた時とかにfloatさせた子要素が親要素からはみ出すという現象に遭遇されることは結構あると思います。

    これを解決するために空のdivやbrなどにclear:bothをクラス指定してみたり。
    それでも見た目上はOKなんですが、作っている本人としてはなんだか精神衛生上あまり良くなかったりするわけです。

    これを解決してくれるのがclearfix。知っておくと便利です。

    clearfixの設定方法

    親要素に対してCSSで以下のように指定します。

    [css]
    .clearfix:after {
    display: block;
    content: &quot;.&quot;;
    clear: both;
    height: 0;
    visibility: hidden;
    }

    .clearfix {display:inline-block;}

    /*Hides from IE-mac\*/
    * html .clearfix{height:1%;}
    .clearfix{display:block;}
    /*End hide from IE-mac*/
    [/css]

    :after擬似要素を利用して、親要素の直後にcontentプロパティで仮コンテンツを挿入しclear:bothでfloatをクリアさせています。
    いやはや、凄いですね。