カテゴリー: Web

  • 人気記事を表示するWordPressプラグイン

    前回、『関連記事を表示するWordPressプラグイン』としてSimilar Postsを紹介しました。そこで今回は、Blogでの人気記事を表示するWordpressプラグイン『Popular Posts』を紹介します。

    Popular Postsの導入方法

    まずはプラグインの前にPost-Plugin Libraryをダウンロードします。

    次にプラグインPopular Postsをダウンロードします。

    1. Post-Plugin Libraryをダウンロード後、解凍してプラグインフォルダへアップロード
    2. Popular Postsをダウンロード後、解凍してプラグインフォルダへアップロード
    3. Post-Plugin Libraryを有効化
    4. Popular Postsを有効化

    Popular Postsの設置方法

    人気記事を表示させたい場所に以下のコードを挿入します。

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

    以上で人気記事を表示させることが出来るようになります。

    関連記事を表示させるSimilar Postsと同様、古い記事を埋もれさせないようにすることが出来ますし、初めてサイトに訪れてくれた方にこのサイトがどのような内容のサイトなのかをわかりやすく伝える手段としても有効です。

  • 関連記事を表示するWordPressプラグイン

    Blogの各記事の終わりに関連してそうな記事を自動で表示させたいと思いプラグインを探してみたところ、関連記事を表示させるWordpressのプラグインはいくつかあったのですが、今回の目的、関連記事を表示+柔軟性のあるプラグインとして『Similar Posts』を導入することにしました。

    Similar Postsの導入方法

    まずはプラグインの前にPost-Plugin Libraryをダウンロードします。

    次にプラグインSimilar Postsをダウンロードします。

    1. Post-Plugin Libraryをダウンロード後、解凍してプラグインフォルダへアップロード
    2. Similar Postsをダウンロード後、解凍してプラグインフォルダへアップロード
    3. Post-Plugin Libraryを有効化
    4. Similar Postsを有効化

    Similar Postsの設置方法

    関連記事を表示させたい場所に以下のコードを挿入します。

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

    以上で関連記事を表示させることが出来るようになります。

    このプラグインを使うことによって、古い記事を埋もれさせないようにすることも出来ますし、何より「この記事とあの記事は関連性があったのか!?」など、Blogを書いている本人が気付かなかった新たな気付きも生まれたりもします。

  • 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だけを表示します。

    関連サイト

  • MAC版FirefoxでGoogle Toolbarが動作しない

    先日から突然Firefox(Mac日本語版 3.6.8)のGoogle Toolbarが動作しなくなってしまっていたのですが、暫定的ですが対応策がようやく見つかったのでメモしておきます。

    対応策:

    1. Firefoxのアドレスバーに「about:config」と入力しFirefoxの詳細設定画面を開きます。
    2. 「general.useragent.locale」を探します。一番上に検索フォームに「general.useragent.locale」と入力するとすぐに見つかります。
    3. 値が「ja-JP-mac」となっているのを「ja-JP」に変更します。
    4. Firefoxを再起動します。

    とりあえず、以上の方法でGoogle Toolbarは正常に動作するようになりました。
    たぶんGoogle Toolbarの不具合だと思うので、この不具合が解消されたら変更した値を元に戻しても良いかもしれません。

  • 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に対応しています。