// パンくずリスト

Home > Web

// Google Adsense

WordPressでカテゴリを自由に並べ替える「Category Order」

WordPressはデフォルトでカテゴリを自由に並べ替えることができないので(※文字コード順になっているので一応できなくはない)プラグインを使うことになるのですが、テーマによっては相性問題が起きるようです。
私はwp.vicunaを使っているので、特に問題が起きてないと思われるCategory Orderを選びました。

インストールについては他のプラグインと一緒なので説明は省きます。
というか、WordPressプラグイン公式にアップされている1.0.3は旧バージョンで、作者のサイトに2.0.1があるのですが、見た目と操作方法が逆にわかりづらそうなので旧バージョンにしてます。

画面はこんな感じ。
Category Order

動かしたいカテゴリをドラッグ&ドロップで並べ替えていきます。
小カテゴリはMoreをクリックすれば出てきます。

実際に表示させている部分のソース。

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=1'); ?>

ただ、今はwp_list_categoriesを使うことを推奨されています。
私はそのまま動くから面倒なのであえて変えていないだけです(ダメ人間)。


P.S.
wp_list_categoriesタグを使った例
<?php wp_list_categories('sort_column=name&show_count=1&hierarchical=1&title_li='); ?>

title_li=」を入れないと、トップカテゴリが「カテゴリ」になってしまい、今までのトップカテゴリが子カテゴリ扱いになってしまいます。
タグについての詳細はテンプレートタグ/wp list categories – WordPress Codex 日本語版をご覧下さい。

WordPress使ってる人が読んでおくといいかもしれない記事 その3

TwitterのFavoriteで溜めすぎてさかのぼるのも大変でしたが第3弾です。
2011年4月分までのまとめ。

既に前回からかなりのバージョンアップしてるので、もしかしたら使えないテクニックがあるかもしれませんが、そのへんは寛大な心で絶対許さない!とプリキュアの真似をしていただけると子供達も喜んでくれるかも知れません(※注:私は独身です)。


WordPressでのページ表示高速化の色々まとめ:phpspot開発日誌

ライブドアのサーバーエンジニアさんに百式系ブログ(WordPress)の負荷対策について聞いてきた | IDEA*IDEA

2011年版!絶対にインストールしたいWordPressプラグイン45個 | Vanilla Rock

カスタマイズやプラグイン等、今年に入ってブクマしたWordPressの関連記事まとめ・国内編 – かちびと.net

WordPressをインストールしたら最初にやってることまとめ

WordPressでサイト設計をする時に覚えておきたいポストタイプの特徴などいろいろ

WordPress と OAuth 認証を使って会員向け Web サービスを作る | ウェブル

WordPressを使ったWebサイトでfunctions.phpによく書いてるやつ – かちびと.net

WordPressを使ったWebサイトにSEO施行する際に役立つっぽいカスタマイズハック – かちびと.net

さくらVPSのWordPressをチューニングして30倍高速化した方法

古い記事をツイートして再利用できるWordPressのプラグイン -Tweet Old Post | コリス

WordPressを初導入したら まず最初にやるべき24の設定 – ワードプレステーマTCD

WordPress(Blackbird Pie)を更に便利に使う – FavHtml | 普通のサラリーマンのiPhone日記

WordPress 初心者にも分かるデフォルトテーマ twentyten の functions.php を解体して学ぶ基本設定編 | ウェブル

WordPressにプラグイン使わずソーシャルボタン設置

今まではプラグインとしてWP Social Bookmarking Light(導入例)を使ってきましたが、そのままでは細かく設定できないので手動に切り替えました。

参考にさせていただいたのはこちらの記事です。
WordPressにプラグインを利用しないでソーシャルボタンを設置する方法(moonblack.net)

ただ、当ブログは3カラムですし、記事上部に設置したかったのでCSSとソースをいじってます。
テンプレートはwp.vicunaですので、参考にされる方はそれぞれに合わせた修正をしてください。

■ヘッダ(header.php)に以下を追加

<?php if ( is_single() ) : ?>
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<?php endif; ?>

■単一記事(single.php)の設置したい場所に以下を追加
			<div class="textBody">
				<!-- ソーシャルボックス -->
				<ul id="social_box">
					<!-- はてなブックマーク -->
					<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
					<!-- Twitter -->
					<li><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="[<?php bloginfo('name'); ?>] <?php the_title(); ?>" data-count="horizon">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
					<!-- Facebook -->
					<li><iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true"></iframe></li>
					<!-- Google+ -->
					<li><g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone></li>
			</ul>
			<br class="clearit" />

■CSS(core.css)に以下を追加
/* ソーシャルボタン
---------------*/

#social_box{
    background:none;
    width:370px;
	margin-left:auto;
	margin-right:0;
	list-style:none;
}
 
#social_box li {
	float:left;
    padding:0px 5px;
    background:none;
}

.clearit {
	margin: 0;
	padding: 0;
	height: 0;
	clear: both;
}


これで表示されているはずです。
ちょっと悩んだのが右寄せなのですが、何故か右に隙間が空いて、float使ったりposition使ったりでも解決せず、結局単純にwidth幅を広く取りすぎていただけというオチでした。
エディタで手打ちしてるとこのへんが弱点ですね・・・

ちなみに、最初に紹介したプラグインもそれなりに設定できますし、何より国内のサービスはほとんど対応しているので、ソースごちゃごちゃさせたくないとか楽な方がいいという方はプラグイン使った方がいいかと思います。

WP Social Bookmarking Light導入&カスタマイズ

ブックマークサービスやSNSボタンを設置する「WP Social Bookmarking Light」を導入してみました。
開発が日本の方ということで、国内サービスへの対応が多いのが特徴です。

私はとりあえず欲しかった
・はてなブックマーク
・Twitter
・Facebook
・Google+1
を設置しました。

ただ、利点である「簡単に設定&設置できる」ということが弱点にもなっています。
要するにカスタマイズできる範囲が少ない&わかりづらいということで、カスタマイズする場合モジュールをいじることになります。実際、表示の問題からCSSをいじってる人も多いようで、検索すると色々ヒットしますね。

私はTwitterへ送る時ブログタイトルも入れたかったので下記のようにservices.phpを修正しました。

    function twitter()
    {
        $options = wp_social_bookmarking_light_options();
        $twitter = $options['twitter'];
        $width = $twitter['width'] != '' ? $twitter['width'] : '120';
        $height = $twitter['height'] != '' ? $twitter['height'] : '20';
        return $this->link_raw('<iframe allowtransparency="true" frameborder="0" scrolling="no"'
                                .' src="http://platform.twitter.com/widgets/tweet_button.html'
                                .'?url='.$this->encode_url
                                .'&amp;text='.'&#91;'
								.$this->encode_blogname
								.'&#93;'
								.$this->encode_title
                                .($twitter['via'] != '' ? '&amp;via='.$twitter['via'] : '')
                                .'&amp;lang='.$twitter['lang']
                                .'&amp;count='.$twitter['count']
                                .'"'
                                .' style="width:'.$width.'px; height:'.$twitter['height'].'px;">'
                                .'</iframe>');
    }

CSSの内容はcontent.php真ん中へんにあります。
これHEAD内に直接記述されてあまり気分的によろしくないので、切り取って外部に出すのと修正を次の段階でやりたいと思います。

WordPress 3.2.1にアップデート

WordPress 3.1.4から3.2.1にやっとアップデートしました。
今まで保留していたのはプラグインの互換性検証をしていなかったからなのですが、特に問題となるような声も聞こえてこなかったのでした次第です。

ダッシュボードのデザインが結構変わっているのと、Firefox3.6.21だとバージョン古くてフル活用できないよ!と出てくるくらいですかね、見た目ではっきりわかるのは。
高速化は特に重い処理してないのとサーバの問題が大きいのであまり関係ないだろうか。

とりあえず色々試して様子見しましょう。

コンテンツ
Information
「君の名は。」Blu-rayコレクターズ・エディション 4K Ultra HD Blu-ray同梱5枚組 (初回生産限定)(早期購入特典:特製フィルムしおり付き)
[君の名は。コレクターズ・エディション]

【Amazon.co.jp限定】劇場版 ソードアート・オンライン -オーディナル・スケール-(メーカー特典:「原作イラストレーターabec描き下ろし キャンバスイラストカード」付)(オリジナル特典:「描き下ろしイラストB1布ポスター(アスナ)」「描き下ろしイラストブックカバー(アスナ)」付)(完全生産限定版) [Blu-ray]
[劇場版 ソードアート・オンライン]

【Amazon.co.jp限定】「劇場版トリニティセブン -悠久図書館と錬金術少女-」(描き下ろしA3ポスター付)(メーカー特典:劇場告知B2告知ポスター付) [Blu-ray]
[劇場版トリニティセブン]

Newニンテンドー2DS LL ブラック×ターコイズ
[Newニンテンドー2DS LL]

この素晴らしい世界に祝福を! 2第1巻限定版 [Blu-ray]
[この素晴らしい世界に祝福を!2 第1巻]

きんいろモザイク Pretty Days( イベントチケット優先販売申込券 ) [Blu-ray]
[きんいろモザイク Pretty Days]

【Amazon.co.jp限定】未確認で進行形 Blu-ray BOX(B2布ポスター付き)
[Amazon限定 未確認で進行形BD-BOX]

RSS Reader
検索
Feeds