便利じゃなければプログラムじゃ無い!
仕事が楽になって業務効率がUPするシステムを提供!

レスポンシブデザインの無料WordPressテーマ「Respo」

2012/6/16 (土) • Web, Wordpress2 CommentsRead More »

WordPressテーマ「respo」

初めまして。当サイトの管理者の藤原です。
ブログ初エントリーの今回はこのブログで使ったWordpressのテーマ「Respo」をご紹介します。

実は当初、このサイトを立ち上げるにあたってMovableTypeを利用して作成しようと思っていました。
理由は単純でMovableTypeは仕事で利用する事が最も多いブログツールでカスタマイズも慣れているので早く立ち上げられるというところです。

しかし、今回はまだ数回しか使っていない、正直あまり慣れないWordpressをあえて利用して立ち上げる事にしました。
尚、今回利用したWordpressのテーマはレスポンシブデザインに対応した「Respo」です。

シンプルなレイアウトにトップページのスライダーと新着記事、人気記事などのタブ表示がついたスマートフォン対応の便利なテーマです。しかも、これが無料とは!

Wordpressテーマrespo

Wordpressテーマrespo

デモサイト ダウンロードページ

早速、テーマを使って立ち上げてみました。

WordPressテーマ「Respo」の利用にあたって

しかし、私の環境でアップするとトップページで利用されているスライダープラグイン「flexslider」とサイドバーのタブ「jQuery UI Tabs」他…を利用する為のjsファイルがエラーで正常に表示されず一部修正する必要がありました。

対応したのはWordpressをインストールしたディレクトリ /wp-content/themes/respo/js/ にある以下の3ファイルです。

  • slider.start.js
  • tabs.js
  • ownScript.js

修正した内容はそれぞれ以下の通りです。

slider.start.jsのソースを開く

//$(window)をjQuery(window)に変更
jQuery(window).load(function() {
//$('.flexslider')をjQuery('.flexslider')に変更
 jQuery('.flexslider').flexslider({
//アニメーションをフェードからスライドに変更(各自お好みで)
 animation: "slide",
 slideshow: true,
 slideshowSpeed: 7000,
 animationDuration: 600,
 });
});

tabs.jsのソースを開く

jQuery(document).ready(function(){
 jQuery( '#serinfo li:not(:first)' ).hide();

 jQuery('#serinfo-nav li').click(function(e) {
 jQuery('#serinfo li').hide();
 jQuery('#serinfo-nav .current').removeClass("current");
 jQuery(this).addClass('current');

//$(this)をjQuery(this)に変更
 var clicked = jQuery(this).find('a:first').attr('href');
 jQuery('#serinfo ' + clicked).fadeIn('slow');
 e.preventDefault();
 }).eq(0).addClass('current');
});

ownScript.jsのソースを開く

//
//$を全てjQueryに変更
//

jQuery(document).ready(function(){

/* slider image hover effect */
jQuery('#tabsmallss li img').animate({opacity: 0.3}, "slow");
 jQuery('#tabsmallss li img').hover(function() {
 $(this).animate({opacity: 1}, "slow");
 }, function() {
 jQuery(this).animate({opacity: 0.3}, "slow");
});

/* line posts hover */
jQuery('ul.bigtips li,ul.smalltips li').hover(function() {
 jQuery(this).find('img')
 .animate({
 opacity: '0.2',
 }, 400);
 jQuery(this).find('p')
 .animate({
 opacity: '1',
 }, 600);

 } , function() {
 jQuery(this).find('img')
 .animate({
 opacity: '1',
 }, 800);
 jQuery(this).find('p')
 .animate({
 opacity: '0',
 }, 600);
});

/* end line posts hover */

jQuery('.item_full img,.item_full2 img').hover(function() {
 jQuery(this).animate({opacity: 0.15}, "normal");
 }, function() {
 jQuery(this).animate({opacity: 1}, "normal");
 });

jQuery('.item_plain').hoverIntent(function() {
 jQuery(this).css({});
 jQuery(this).find('.folioinfo')
 .animate({
 opacity: '1',
 }, 400);
 jQuery(this).find('img')
 .animate({
 opacity: '0.6',
 }, 400);

 } , function() {
 jQuery(this).css({});
 jQuery(this).find('.folioinfo')
 .animate({
 opacity: '0',
 }, 800);
 jQuery(this).find('img')
 .animate({
 opacity: '1',
 }, 400);
});

/*slider headings hover */

jQuery('.panel').hoverIntent(function() {
 jQuery(this).css({}); /*Add a higher z-index value so this image stays on top*/
 jQuery(this).find('.thumb-title')
 .animate({
 top: '50px',
 }, 500);

 } , function() {
 jQuery(this).css({}); /* Set z-index back to 0 */
 jQuery(this).find('.thumb-title')
 .animate({
 top: '-105px',

 }, 800);
});

 /* Resize too large images */
 var size = 598;
 var image = jQuery('.entry img');

 for (i=0; i size) {
 var newHeight = bigHeight*size/bigWidth;
 image[i].width = size;
 image[i].height = newHeight;
 }
 }

});

とりあえずこれでスライダーとタブが正常に表示するようになりました。
まだこれから手を入れなければいけない事が多々ありますが今日はとりあえずここまでにしておきます。

タグ: , ,

2 Responses to レスポンシブデザインの無料WordPressテーマ「Respo」

  1. […] 下記でわかりやすく説明されています。 レスポンシブデザインの無料WordPressテーマ「Respo」 WordPressテーマRespoのちょっとしたカスタマイズ […]

  2. infith より:

    連絡ありがとうございます。

    また返答が遅くなってしまい大変申し訳ありません。
    (最近、異常なスパムコメントが多くチェックに手が回りませんでした)

    解決したかも知れませんがご質問の件についてお答えします。

    スライダーですがダッシュボードの「Respo」メニューを開き、
    左メニュー「Slider and featured sections」メニューを開きます。

    その中でスライダーに表示するカテゴリーを選択する必要があります。
    指定したカテゴリーの記事のイメージをスライダーとして利用されます。

    ちなみに「Disable Slider」にチェックが入っているとスライダーは無効になります。

    それではよろしくお願いいたします。