表示 | VIVABlog

WordPress サイドバーウィジェットのTips

サイドバー (sidebar.php)でのサイドバーウィジェット表示部分は以下なので、ウィジェットの有無関わらず表示したいものはphp ifの上に書く。

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : // begin primary sidebar widgets ?>
この間
<?php endif; ?>

ウィジェット部分のhtmlを弄りたい場合、テーマのための関数 (functions.php)を弄る。

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
?>

（例）

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' =>'</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>

Continue reading » · Rating: · Written on: 04-06-08 · No Comments »

WordPress2.5でpopularity contestを動かす

2.5にしたらpopularity contestが動作しなくなりました。配布サイトでも特にアップデートされていないのですが、フォーラムを観ると現行のバージョンでの解決方法が掲載されていました。しかもめちゃめちゃ簡単。

popularity-contest.phpをエディターで開いて59行目にある ../../wp-blog-header.php を../wp-blog-header.php にして保存。上書きアップロードするだけ。

[ WordPress › Support » Alex king fatal error Popularity Contest ]

Continue reading » · Rating: · Written on: 04-02-08 · 2 Comments »

LDRやBloglinesでFC2などの画像を表示させる

オンラインサーバー型のRSSリーダーから、FC2ブログやDTIブログなどのRSSの画像を表示するロゴマークになってしまうのを解消する方法です。

Adaptive Referer Remover 0.2.2 - とあるはてな社員の日記

にあるリファラーブロックのFirefoxアドオンをインストールして、設定に追加。

^http://localhost ^http://127\.0\.0\.1 ^http://www\.google\.co ^http://.\.hatena\.ne\.jp ^http://del\.icio\.us ^http://mixi\.jp ^http://reader\.livedoor\.com ^http://www\.bloglines\.com

やったー！

[ デジタル家電系日記 Livedoor Readerなどでブログの画像が表示されない場合の対策。Firefoxの拡張「Adaptive Referer Remover」を使う。 ]

Continue reading » · Rating: · Written on: 11-13-07 · No Comments »

WordPressで「最近のエントリー記事」を表示する

ブログ形式だと結構重要な「最近のエントリー」ですが、WordPressではなぜかデフォで対応していない？という事で。

プラグインを使う場合には、Fuzzy Recent Posts Pluginのようなプラグインがあります。

普通に、テンプレートタグでも表示できるのでお好みで。

Continue reading » · Rating: · Written on: 04-13-07 · 1 Comment »

WordPressにパンくずリストを表示するプラグイン

その記事のサイト内での位置を分かり易く表示する「パンくずリスト」をWPで表示する方法です。検索エンジンからのサイト訪問者に分かり易くナビをする事で、ユーザビリティの向上に繋がります。

プラグインBreadcrumb Nav XTの導入

Breadcrumb Navigation XTをダウンロード。
解凍したら wp-content/plugins/ にアップロードして、プラグインの管理から有効化。

コード埋め込み

テンプレート（シングルポストなど）に以下のコードをコピペします。

<?php if (class_exists('breadcrumb_navigation_xt')) {
 
    // New breadcrumb object
    $mybreadcrumb = new breadcrumb_navigation_xt;
    // Options for breadcrumb_navigation_xt
    $mybreadcrumb->opt['title_blog'] = 'Home';
    $mybreadcrumb->opt['separator'] = ' &raquo; ';
    $mybreadcrumb->opt['singleblogpost_category_display'] = true;
    // Display the breadcrumb
    $mybreadcrumb->display();
} ?>

url_blog　：　ブログURLを指定
title_blog　：　ブログのタイトルを指定
separator　：　セパレーター>の変更

プラグインエディタでカスタマイズ

FTPで /wp-content/plugins/breadcrumb-navigation-xt.php のパーミッションを707等にして、プラグインエディタで表示のカスタマイズをします。

Blog article:という表示が邪魔だったのでソートして削除。

設定の変更はいろいろ出来ますが、パンくずリストとして表示できればOKなのでそこまで弄らなくてもいいかな。

Continue reading » · Rating: · Written on: 02-21-07 · No Comments »

htmlやPHPなどのソースをBlogに表示する方法

< >をそのまま入力するとコードとして認識されるので、 < を < に、> を > にそれぞれ書き換えなければいけません。
基本的にhtmlコードなどをブログなどに記載する場合は、<pre>タグを使うようになっています。

<pre>タグタグを使う場合

<pre><code>
ソースコード
</code><pre>

という風に、<pre>タグで<code>タグを囲って使います。
ただ、このままだと折り返さないコードの場合は、横幅がスゴイことになってしまうのでcssでちゃんと折り返されるようにします。

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

WordPressプラグインを使用してコードを表示する場合

PHP Hilight Stringインストール方法 | Download
使い方は簡単で、コードを専用のタグで囲うだけ。

同梱されているcssはテンプレートcssに入れればOK。
このcssを編集すればフォントの大きさやボーターカラーの変更ができます。

/*
ハイライトする色の指定
*/
.hl-surround{
    -moz-border-radius: 5px;
    background-color: #F9FBFC;
    border: 1px solid #C3CED9;
    padding: 8px;
    margin-bottom: 5px;
    width: 500px;
    overflow: auto;
    text-align: left;
}
 
.hl-surround, .hl-surround pre, .hl-surround span{
    font: normal 10pt 'Courier New', monospace;
}
 
.hl-default{
    color: Black;
}
.hl-code{
    color: Gray;
}
.hl-brackets{
    color: Olive;
}
.hl-comment{
    color: #ffa500;
}
.hl-quotes{
    color: #8b0000;
}
.hl-string{
    color: Red;
}
.hl-identifier{
    color: Blue;
}
.hl-builtin{
    color: Teal;
}
.hl-reserved{
    color: Green;
}
.hl-inlinedoc{
    color: Blue;
}
.hl-var{
    color: #00008b;
}
.hl-url{
    color: Blue;
}
.hl-special{
    color: Navy;
}
.hl-number{
    color: Maroon;
}
.hl-inlinetags{
    color: Blue;
}
.hl-main{
    background-color: transparent;
}
 
.hl-main pre{
    margin: 0; padding: 0;
}

MovableType用プラグインを使用する場合

エントリー投稿画面に追加される「&」ボタンを押すだけで、選択した文字列を実体参照化してくれる便利なプラグイン。

[MovableType用EntityRefButtonプラグイン v0.0.5 ]

Continue reading » · Rating: · Written on: 02-21-07 · No Comments »

WordPressで抜粋表示部分を表示させる

アーカイブ一覧やindexに、記事投稿の抜粋表示部分のを表示させることで、Movable Typeの追記と同じような感じにする方法。

テンプレートファイルのindex.phpなど変更したい部分の

<?php the_content(__('Read the rest of this entry &raquo;')); ?>

を

<?php the_excerpt(); ?>

に置換する。

Continue reading » · Rating: · Written on: 02-19-07 · No Comments »

VIVABlog