レスポンシブ対応のWordPressテーマ「Exray」




旅行記以外のポストは久しぶりです。今日のような台風の大嵐の日は外に出ても濡れるだけなので、家でPC作業をしていました。

自分のブログを独自ドメインを取って、サーバーを借りて、WordPressで構築するようになってから2年あまり。WordPressを使用し始めてからずっとzeecorporateというデザインを使っていました。欧米の作者のテーマなので英語のFAQに四苦八苦しながらの利用でしたが、最近チェックしてみると、なんと2014 Mayでサポートを終了したとのこと。

zeecorporateを気に入って使っていましたが、このブログの旅行記が増えて行くにつれ、サイドバーのカテゴリーの部分が長くなり、zeecorporateの2カラムデザインで限界を感じ始めてはいました。また、いくつかのプラグインが動かない、という謎のエラーも頻発しておりました。zeecorporateをphpを自分で組んで3カラムデザインに変えるのに、phpを組んでデバッグする時間も無く、やっぱりいつかのタイミングで3カラムデザインに変えなきゃな、と思う事数ヶ月。一方で、最近のweb designの流行りは”レスポンシブデザイン”であり、zeecorporateはレスポンシブデザイン非対応でサポートも終了したということは、これ以上の発展も見込めません。

レスポンシブデザインとは”あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる手法のこと”です。今の世の中、webはPC、タブレット、スマートフォン、少なくても3デバイスから閲覧される事を考えて構築しなければならず、zeecorporateのテーマを使っているときはスマホと携帯用の表示にはWordPressのplug-inで対応させていました。しかし、レスポンシブデザインのWordPressテーマを使うと、テーマのデフォルトのセッティングだけで、各デバイスで最適化されて閲覧が可能なので、今後を考えると、テーマはレスポンシブデザイン対応の物を選ぶ時なのではないか?

そう思いつつ、今日は自分の好みのWordPressテーマを物色。新しいWordPressテーマの条件は①レスポンシブデザイン②3カラム対応 この2つの条件。そして見つけた良さそうなテーマがこの”Exray“です。

free-wordpress-theme-for-multipurpose-Exray-toppage-image

このExrayテーマの特徴はレスポンシブデザインであるので、スマホやタブレットからでも最適化したデザインで閲覧が可能である事、1-3カラムまで自由度の高いカラム設定であり、色設定がほとんどなくてシンプル、という3つの要素が備わっています。あえて欲を言えば、両サイドのカラムの設定を左右に振り分けるだけでなく、右側に固めたかった、という要望はあれど、フッターにもウィジットを配置できるので、今まで右側にかなり長くあったウィジットがかなりシンプルにまとめる事ができました。カテゴリーが単独で右カラムに配置できたことで、より見やすくなったと思います。また、レスポンシブデザインなので、これまで使用していたWPtouch Mobile PluginとKtai Styleのプラグインも不要となりました。

今後、もう少しデザインはいじるかもしれませんが、当面はこのExrayでこのブログを運用していこうと思いますので、今後ともよろしくお願いします。

**8/11追記**
カテゴリー表示にすると2ページ目以降、同カテゴリーのold post記事ではなく、1ページ目の最後の記事の前後記事(カテゴリー関係なく)に行ってしまうバグがあります。

解決方法がwordpress.orgのフォーラムにありました。category.phpを以下のコードを全置き換えすると解決します。

<?php get_header(); ?>

<!-- Main Content -->
<div class="container" id="main-container">

	<div class="row">

        <?php get_exray_primary_sidebar(); ?>

        <?php get_exray_content_html_opening(); ?>

			<?php Exray::load_breadcrumb(); ?>

			<div class="content" role="main">
				<?php if(have_posts()) : ?>

						<div class="top-content">

							<h5><?php single_cat_title( __('More from: ', 'exray-framework'), true ); ?></h5>
							<hr class="content-separator">
						</div> 

					<?php while(have_posts()) : the_post(); ?>
						<!-- The Loop of Post -->
						<?php get_template_part('content', get_post_format()); ?>

						<!-- If post format content, show post format content items -->

					<?php endwhile; else :  ?>
						<!-- If no Post Found -->
						<h1><?php _e("No post were Found", "exray-framework") ?></h1>

					<?php endif; ?>

                <!-- Pagination for older / newer post -->
                <nav class="pagination clearfix"  id="nav-below" role="navigation">

                    <p class="article-nav-prev"><?php next_posts_link(__('← Older Post', 'exray-framework')); ?></p>
                    <p class="article-nav-next"><?php previous_posts_link(__('Newer Post → ', 'exray-framework')); ?></p>

                </nav>
			</div>
			<!-- end content -->
		</div>
		<!-- end span6 main -->	

		<div id="primary" class="widget-area span3 main-sidebar" role="complementary">

			<?php get_sidebar('sidebar'); ?>

		</div>
		<!-- end span3 primary left-sidebar -->	

        <?php get_exray_secondary_sidebar(); ?>  

	</div>
	<!--End row -->

</div>
<!-- End Container  -->
<!-- End Main Content -->

<?php get_footer(); ?>

応援よろしくお願いします!
にほんブログ村 旅行ブログ 女一人旅へブログランキングならblogram
にほんブログ村 海外生活ブログ サンディエゴ情報へ


  • このエントリーをはてなブックマークに追加