目次：WordPress雑記帳

• WordPressのサムネイルの大きさを色々使いたい
• 完全無料のレンタルサーバーで最新WordPressを動かす！
• WordPressのカテゴリーをｊQueryでアコーディオンに

WordPressのサムネイルの大きさを色々使いたい

WordPressのサムネイルの大きさを色々使いたい

WordPressのサムネイル画像のことをアイキャッチと呼びます。

そして、Wordpressのサムネイルの大きさを色々指定したいこと、あると思います。
私のブログも表示箇所によってサムネイルの大きさが変わってくるのでWordpressのタグでサムネイル画像の大きさを自働リサイズしてくれたら便利だな、ということでメモ。

任意の大きさにリサイズ

<?php the_post_thumbnail( array(100,100) ); ?>

WordPressのメディア設定指定サイズにリサイズ

GDでプラグインかまして、キャッシュファイルを生成しようと思っていましたが、便利に出来ているんですね～

完全無料のレンタルサーバーで最新WordPressを動かす！

無料でWordpressが運用出来るレンタルサーバーがあれば素敵ですよね。
これを最初に思いついたとき、

そう思っていました。

PHPとMysql PHPmyadminの最低限の環境だけで作ったWordpress

(このアカウントはいずれ削除します。)

無料レンタルサーバーだから広告表示や、ちょっともっさりするのは当たり前かもしれませんが、
何が大変かというと、PHPmyadminは付いていたのですがPHPからファイルのアップロード関数が実行されず、Wordpressの管理画面から画像がアップロード出来ないのでFTPからアップを行い、PHPのバージョンも5。1系だったので古いWordpressを探してインストールしました。

.htaccessも未対応のため、記事へのリンクはパラメータではなくスラッシュ区切り、数字ベースにしたいのに、パラメータ形式のリンクになってしまいました。

そんなわけで今回学習した、
Wordpressを運用するために必要な環境は

5番目以降は無くても生きていけるかもしれませんが、無いとそれなりに苦労します。

WordPressを利用するにはPHPとMysqlさえ使えればどうにか作れるじゃん！というのは誤解でした、けっこうハードルが高いです。
色々調べてみて、全ての環境を満たす無料のレンタルサーバーはこちらでした

ITかあさんチョイスの最強無料レンタルサーバー　PF-X.NET

どのあたりが最強か説明させて下さい。

独自ドメインが使えて、商用OKで2GBも容量あるってすごい！本当に無料なのかと目を疑います。

注意

審査ありと審査無しの2つのコースがあり、審査ありコースだと、mbsendmailが使えるようになりますが、この場合アフィリエイトや商用利用が出来なくなるそうです。
また、独自ドメインを利用する際はサイト内の分かりやすいところにPF-X.NETを利用していることがわかるように記述をしなければいけないそうです。

PF-X.NETの利用手順

サイトの左メニューより

必要事項を記入して送信。
(携帯メールアドレスがないと登録出来ないようです　開通すると、FTPの情報もなぜか携帯メールアドレスに送られてきました)

登録完了メール抜粋

初期設定　DB作成

一応、わずか5分ほどでレンタルサーバーは開通するのですが、Mysqlのデータベースが用意されていませんので、データベースの準備だけします。

ヘッダーメニューより

ここには携帯に送られてきたアカウントとパスワードを入れてログインします。

Mysql管理に入り、Mysqlを作成ボタンを押すと　自働でMysqlユーザー、パスワード、データベース名が割り振られます。
1アカウントにつき、１つだけ利用できるようです。

これで最新Wordpressが利用できる最強レンタルサーバーの準備が全て完了です。
後はWordpressをインストールし、public_html下にWordpressのファイルを全てアップロードして通常通りインストールを実行して下さい。

ITかあさんもPF-X.NETでWordpressを設置した

出来なかったこと、つまづいたこと

開設までが超スピーディーで最強無料レンタルサーバーなのですが、２つつまづいたポイントがありました。

PHPMyadminはWEBプログラマーのかあさんにとって大変重要なツールなのですが、考えてみれば自分でphpMyadmin2.xなんて古いPHPmyadmin設置したことがありません。(あったかもしれないけど忘れた)
なので、テスト的にWordpressを動かしたいだけだったので今回はphpMyadminはインストールしていません。
また、mod_rewiteが使えないようでした。.htaccess設置した瞬間に500エラーで何も見えなくなりました。
そこで、Wordpressのパーマリンク設定はデフォルトで対応しました。

まとめ

色々調べてみて、全ての環境を満たす無料のレンタルサーバーは今回紹介したこちらのサーバーでした。

以前無料のレンタルサーバーを利用して意外なメリットは インデックスがやたら早い ということでした。

新規でドメインを取得して、インデックスされたり、検索がだんだん引っかかってくるのは一ヶ月くらい長いとかかりますよね。

今回はどうなんでしょう。

正直、ヘタな100円のレンタルサーバーよりよほど快適でスピーディーでした。
この紹介でPF-X.NETの人気に火がついたらｲﾔだな～　だってユーザー大量に増えたら重くなっちゃうかもしれないでしょ？

WordPressのカテゴリーをｊQueryでアコーディオンに

WordPressの入れ子式カテゴリーをjQueryで開閉式にする

ECサイトなど、カテゴリー数が尋常ではないレベルのカテゴリー数になってしまった場合、Javascriptで入れ子になったカテゴリーはアコーディオンで開閉式にしてあげるのがスマートで大人なダンディズムです。

2階層のカテゴリーをアコーディオンに

親子式のカテゴリーWordpressで作成して

<?php wp_list_categories('show_count=TRUE&=1&title_li='); ?>

と記入すると、以下のようなHTMLが出力されますね。出力されるカテゴリーのリンクをdivで囲ったとするとこうなります。

<div id="side">
<ul>
<li class="cat-item cat-item-225649"><a href="#">あ行</a> (4972)
<ul class='children'>
<li class="cat-item cat-item-225647"><a href="#">あ　のリスト</a> (2564)
</li>
<li class="cat-item cat-item-225648"><a href="#">い　のリスト</a> (2696)
</li>
</ul>
</li>
<li class="cat-item cat-item-226589"><a href="#" title="か行 に含まれる投稿をすべて表示">か行</a> (214)
<ul class='children'>
<li class="cat-item cat-item-226590"><a href="#">か　のリスト</a> (214)</li>
</ul>
</li>
</ul>
</div>

このタグを、クリック時にアコーディオンで開き、かつ、他のアコーディオンを開くと自然に閉じるようにするには以下のコードを書きます。

$(document).ready(function(){ 
//親カテゴリーのリンクはjQueryで削除。必要な場合は以下1行を削除
$('#side > ul > li').children('a').removeAttr('href');
//初期状態では隠す
$('#side .children').hide();
//親カテゴリーをクリックしたら
$('#side > ul >li').click(function(){
//子供を表示
$(this).children('ul').show('slow');
$('#side > ul >li>ul').not($(this).children('ul')).hide('slow');
});
});

親カテゴリーをクリックした時に子供のカテゴリーを表示させたいため、親のカテゴリーのhrefはjQueryで削除してしまいました。(親カテゴリーをクリックした後、親カテゴリーのページにジャンプしてしまうのを防ぐためです)

DEMO

3階層になったWordpressのカテゴリーをアコーディオンにする

先ほどのケースに比べると少ないですが、Wordpressで3階層になった親子関係のカテゴリーリストもjQueryでアコーディオンにしてみました。親子関係、子孫関係がもうめちゃめちゃですが、以下のように書くと無事実装できました。

$(document).ready(function(){ 
//親カテゴリーのリンクはjQueryで削除。必要な場合は以下1行を削除
$('#side > ul > li').children('a').removeAttr('href');
//親カテゴリーのリンクはjQueryで削除。必要な場合は以下1行を削除
$('#side > ul >li > ul > li').children('a').removeAttr('href');
//初期状態では隠す
$('#side .children').hide();
//親をクリックしたら
$('#side > ul >li').click(function(){
//クリックされた子供のｕｌを表示する
$(this).children('ul').show('slow');
//それ以外のulは隠す
$('#side > ul >li>ul').not($(this).children('ul')).hide('slow');
});
$('#side > ul >li > ul > li').click(function(){
$(this).children('ul').show('slow');
$('#side ul ul ul').not($(this).children('ul')).hide('slow');
});
});

こちらのDEMOですが、こちらのサイトで実装しました。デモとしてよろしければご覧下さい。