woothemesの使い方

Woo THEMESのここがすごい!

2011.10.23(日) WordPress, テーマ
このエントリーをはてなブックマークに追加

今回は、このブログで使用しているテーマ「TheMorningAfter」について書きます。
このブログを始めるにあたり、どんなテーマにしようか悩んでましたが、このテーマはほとんど一目ぼれで決めました。
WooTHEMESという、商用テーマを販売しているサイトの、フリー版なのですが、さすがに完成度が高いなぁと思います。ただ、設定にWooテーマ専用オプションというのがあり、ちょっと普通のテーマと違うので、少し理解するまでに時間がかかりました(まあ、慣れれば便利なんですが)。
[divider_flat]

[divider_flat]
今後、このテーマとか、他のWooTHEMESのテーマを使用したい人がいるかもしれませんので、解説しておこうかと思います。

[divider]

アイキャッチがでかい

まず目を引くのが、朝焼け?の画像です。ほとんどこれに惹かれたといっても過言ではないほどきれいですね。で、どうやって出しているのかな?と思ってたら、アイキャッチ画像でした。アイキャッチはつけたいと思ってたのですが、こんだけ大きいとちゃんとした画像を用意しなきゃって感じがすこし悩ましいです。まぁ、出来る限りイラストとかつけていきたいものです。
[divider]

Welcomeコメントにて自己紹介を (オプションその1)

WordPressのテーマで、自分のプロフィールがトップページにあるものは少ないような気がします。大体固定ページを作成して、そこに記載したりしてるのかなと思いますが、トップにあれば来た人にすぐ見てもらえるし、固定ページを用意しなくていいのは楽です。サイズも小さすぎず、大きすぎずでいいです。
ちなみに、WordPressのプロフィールを使用しているわけでなく、Wooのテーマオプションで設定します。

[divider]

メニューはどこに?(オプションその2)

画面の右上には、てっきりメニューになってるのかと思いきや、そうではありませんでした。HOME,ABOUT,ARCHIVES,SUBSCRIBE,CONTACTの5つのURLを設定可能です。
では、メニューはどうるすかっていると、サイドバーに固定ページか、Wooが提供するWoo-CustomNavMenuを使用するしかないみたいです。若干不便ですが、まあ、仕方ないです。
尚、Woo-CustomNavMenuを使用する場合は、オプションで使用する旨、設定しなければなりません。


[divider]
これで、ウィジェットメニューに、Woo-CustomNavMenuが出てきますので、使えるようになります。
[divider]

最近の投稿にもアイキャッチを使用できる(WooRecentPost)

最近の投稿(ResentPost)にもアイキャッチがついてますが、これは標準機能ではなく、Wooが提供するWoo-RecentPostを使用します。せっかくアイキャッチつけるのですから、最近の投稿の内容を少しでもわかりやすくなるといいですね。また、アイキャッチだけでなく、投稿ないに画像があれば、それを表示してくれます。もちろん、自動的にトリミング&縮小してくれますから、なにも考える必要はありません。
[divider]

類似投稿がだせる(オプションその3)

多分、カテゴリなどを見てると思いますが、最新の投稿内容と類似している投稿を紹介できます。
その数もオプションで指定できます。で、ここにもアイキャッチが。
これは、トップページにしか出てこないにですが、シングルページにも出た方がいいなあ。今度改造してみるか。
[divider]

Twitterがオリジナル

ホームページの外観に合わせた形で、Twitterのストリームが表示できます。
設定は、ユーザー名を入れるだけという超簡単仕様。ん?まてよ、ユーザー名だけということは、自分のユーザーでなくてもいいということか。と思って、やってみたらできました。まあ、それをやる用途があるかというと、特にないのですが、、、
[divider]

カスタムポストタイプで、更新履歴を!

このテーマで、一番ほほぅーと思ったのは、これかもしれません。カスタムポストタイプは、便利そうなのですが、なかなか用途が思いつかなくて。更新履歴も固定ページでやりがちですが、専用の登録フォームがあれば楽ですよね。しかし、タイトルもなくせるのか。
どんな感じのソースなのか、見てみましょう。

まずは、カスタムポストタイプの登録から

register_post_type(
	'updates', array(
	'label' => __( 'Updates', 'woothemes' ),            // 投稿タイプの名称(複数形でつける)。
	'singular_label' => __( 'Update', 'woothemes' ),    // 1投稿の名称(単数形でつける)
	'public' => true,    // ユーザーのダッシュボードに出すかどうか  
	'show_ui' => true,    // 投稿の一覧などをダッシュボードにだすかどうか
	'capability_type' => 'post',    // 多分、投稿か固定ページかを設定。権限チェックにつかうとのこと?
	'hierarchical' => false,    // 投稿タイプが階層(子)になっているかどうか。親の許可があるかどうかチェック用とのこと
	'rewrite' => false,    // 多分、投稿に対するパーマリンクのカスタム設定?特に使用しない
	'query_var' => false,    // 多分、この投稿を表示させる際のカスタムSQL?特に使用しない
	'supports' => array( 'editor', 'author','trackbacks','comments' )    // 新規投稿画面に出すコントロール
));

そして、表示させる

<?php
    $limit = $woo_options['woo_updates_limit'];    // いくつ出すのかチェック
    $the_query = new WP_Query( 'post_type=updates&showposts=' . $limit );    //MySQLから、カスタムポストレコード取得
    if( $the_query->have_posts() ) {   // ポストがあれば表示
?>
        <div id="home_asides">
            <h3 class="mast"><?php echo $woo_options['woo_updates_heading']; ?></h3> //ヘッダー(Updates)表示
            <ul class="arrow">
                <?php
	            while ( $the_query->have_posts() ) { $the_query->the_post();    //カスタムポストがあれば表示
		    $do_not_duplicate = $post->ID; ?>
                    <!-- phpとか、htmlのタグを、strip_tagsで取り除いて表示している? -->
                    <!-- #にパーマリンクを割り当てる -->
                    <li><?php echo strip_tags( get_the_content(), '<a>' ); ?> <a href="<?php the_permalink(); ?>"rel="bookmark" title="<?php _e( 'Permanent Link to','woothemes' ); ?> <?php the_title_attribute(); ?>">#</a></li>
                <?php } // End WHILE Loop ?>
            </ul>
        </div>
    <?php } ?>

※コメントは、ボクがつけたものです。元ソースとは違っています。

こんだけ書きましたが、一番苦労したのは、最初なぜか画像がまったく出なかったこと。アイキャッチのみならず、通常の投稿内の画像もなにもでませんでした。画像のアップロードは問題なく出来ているのに、なぜか表示されない。
その原因が、以下のオプションでした。


[divider]

多分、画像を自動的にリサイズしてくれるオプションなんですが、PHP5.2以上でないと使用できないみたいなんですね。
で、ボクが借りてるレンタルサーバーのPHPが5.1で、はずしたらやっと出ました。

いかがでしたでしょうか?とりあえず、もう少し中身をみたりして、いつかは自分でテーマを作成したいものですね。

コメントをどうぞ