投稿者: rye

  • WordPressでhttps化 CloudFlare Flexible SSLを導入

    WordPressでhttps化 CloudFlare Flexible SSLを導入

    10月にCloudFlareで無料SSLの提供が開始されました。

    SSL化するとGoogleからの評価も上がりSEOで優遇されるらしいのでCloudFlare Flexible SSLを導入してみました。

    ※注意 SSL化するとウェブページのURLが「http://~」から「https://~」に変わってしまいます。そうなると今までのGoogleページランクやソーシャルメディアからのリンクなどが初期化されてしまいます。

    CloudFlareの設定

    CloudFlareのMy Websitesから該当ドメインのCloudFlare settingsをクリック
    SSLの項目でFlexible SSLを選択

    WordPressの設定

    先に管理画面の一般設定からURLを変更してしまうとリダイレクトループが発生してしまうので、まずプラグインを導入します。
    プラグインから”CloudFlare Flexible SSL”を検索しインストール&有効化
    管理画面の一般設定からサイトアドレスをhttpsに変更して更新
    サイトを確認して問題なければWordPressアドレスもhttpsに修正して更新します。

    ※注意 WordPressアドレスも同時に修正してしまうと、もし設定に不具合があった場合管理画面にアクセスできなくなってしまいます。

  • ValueServer ウェブページを高速化する方法

    GTmatrixでPage Speed Grade:A(99%) YSlow Grade:A(99%)を獲得することができました。
    今回はその方法の一部を公開したいと思います。

    (さらに…)

  • WordPressを自動でバックアップするプラグイン「BackWPup」

    WordPressサイトをバックアップするのに大変便利なプラグイン「BackWPup」の紹介です。

    HTMLで制作されたサイトならばバックアップは簡単にできますがWordPressで制作されたサイトのバックアップはなかなか大変です。

    WordPressサイトのバックアップしなければいけない箇所は

    1. MySQLなどのデータベースのバックアップ
    2. テーマファイルのバックアップ
    3. アップロードした画像などのメディアファイル
    4. 使用中のプラグインファイルのバックアップ(もしくは使用中プラグインリスト)
    5. wp_config.phpなどの設定ファイル
    6. WordPress コアファイル群

    このくらいをバックアップしておかないと何かあった時にサイトを復旧するのは大変です。
    1と2だけあれば何とかある程度の復旧は可能ですが、完全に元通りにするには自分で構築したサイトでなければほぼ不可能ですし作った本人でも相当な時間がかかります。

    1~6までバックアップをとっておけばWordPressに詳しくない人でも復旧できるはずです。
    自分が今使っているバリューサーバーでもハッキング被害などが出たこともあるようですので今回は1~6すべてバックアップを取りたいと思います。

    すべてバックアップを取るとかなりの容量になります。特に6のWordPressのコアファイルは重いです。
    WordPressを再インストールするスキルがある方はバックアップの必要はないと思います。

    (さらに…)

  • サイトの速度をワンクリックで測定 GTmetrixのブックマークレットの使い方

    サイトの速度をワンクリックで測定 GTmetrixのブックマークレットの使い方

    サイトの速度を測定するのに便利なGTmetrixのブックマークレットを紹介します。

    GTmetrixではGoogle Page SpeedとYahoo YSlowを同時に測定できます。
    サイトを高速化するのは最近ではSEOでも非常に重要ですし、何よりユーザビリティが向上します。
    無理に高得点を狙う必要もないですが簡単な設定変更で格段に改善する場合もありますので一度測定してみてはいかがでしょうか?

    ブックマークレットを利用すればわざわざGTmetrixのサイトへアクセスしてURLを入力しなくてもワンクリックで測定できます。

    Firefox Safari Chrome:ブックマークツールバー上にボタンをドラッグしてツールバーに追加、GTmetrixで分析したいサイトにいるとき、それをクリックしてください。

    Internet Explorer:右ボタンをクリックし、「お気に入りに追加」をクリックする。GTmetrixブックマークレットはJavaScriptを使用していますので、セキュリティ警告が表示されます。続行する場合は「はい」をクリックしてください。
    簡単にアクセスするには、IEのお気に入りツールバーにブックマークレットを移動して、GTmetrixで分析したいサイトにいるときクリックしてください。

    参考サイト:GTmetrix FAQ

  • WordPress これは便利!すべてのサムネイルを生成しなおすプラグイン

    WordPress これは便利!すべてのサムネイルを生成しなおすプラグイン

    WordPressでテーマやデザインを変更するとサムネイル画像のサイズを変えなければいけない場合があります。
    でも、サムネイルが作られるのは画像をアップロードされた時なので
    途中でサムネイル画像のサイズを変えてもそれ以前にアップロードされた画像は前のサイズのままになってしまいます。
    画像ファイルが少なければ再アップロードする手もありますが、数が多いととても大変です。

    コントロールパネル>設定>メディアで数値を変えただけではサイトに反映されません。
    thumbnail-size-setting

    そんなときに役に立つのが WordPressプラグイン「Regenerate Thumbnails」です。

    ボタン一つですべての画像のサムネイルを新しい設定値で再生成してくれます。

    Regenerate Thumbnails

  • SCOUTで謎のエラー#3214 原因はJava8だった!

    SCOUTで謎のエラー#3214 原因はJava8だった!

    Sassコンパイルで愛用しているSCOUTですがある日突然エラーが出て使えなくなりました。
    SCOUTを起動して再生マーク?をクリックすると画像のコンソールが出て全く動かなくなります。

    原因を色々調べてみると
    scout-error#3214-details
    scoutのprocess_interaction.jsの11行目でエラーが出ているようです。

    該当箇所はJavaのローカルパスを読み込んでる場所です。

    $(function(){
      var process_map = {};
    
      $(".project").live("watch:start", startWatchingProject);
      $(".project").live("watch:stop", stopWatchingProject);
      $(".projects").live("processes:killAll", killWatchingProcesses);
      air.NativeApplication.nativeApplication.addEventListener(air.Event.EXITING, killWatchingProcesses);
    
      function startWatchingProject(evnt, data) {
        var nativeProcessStartupInfo = new air.NativeProcessStartupInfo();
        nativeProcessStartupInfo.executable = javaDir();
    
        var processArgs = new air.Vector["<String>"]();

    ああ、そういえば最近Javaをアップデートした気がする・・・
    javaのパスを読んでいる箇所は

      function javaDir() {
        if(air.Capabilities.os.match(/Windows/)) {
          path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre7\\bin\\java.exe");
          if(!path.exists){
            path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre7\\bin\\java.exe");
            if(!path.exists){
              path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre6\\bin\\java.exe");
            }
          }
          return path;
        } else {
          return air.File.applicationDirectory.resolvePath("/usr/bin/java");
        }
      }

    Program Filesを調べましたが
    “C:\\Program Files\\Java\\jre7\\bin\\java.exe”
    “C:\\Program Files (x86)\\Java\\jre7\\bin\\java.exe”
    “C:\\Program Files\\Java\\jre6\\bin\\java.exe”
    ひとつも見当たりません・・・
    どうやらアップデートでパスが変わってしまったようです。
    Javaのダウングレードも考えましたが「セキュリティ上最新版を使え旧バージョンへの互換性もある」とJavaのHPに書いてあったのでJava8を使う方向でいきます。

    Java8はjre8かと思いきやjre1.8.0_20にありました。
    なので該当箇所にjre1.8.0_20を追加、下記のように書き換えました。

      function javaDir() {
        if(air.Capabilities.os.match(/Windows/)) {
          path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre7\\bin\\java.exe");
          if(!path.exists){
            path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre7\\bin\\java.exe");
            if(!path.exists){
              path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre6\\bin\\java.exe");
              if(!path.exists){
                path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre1.8.0_20\\bin\\java.exe");
              } 
            }
          }
          return path;
        } else {
          return air.File.applicationDirectory.resolvePath("/usr/bin/java");
        }
      }

    Program Filesの中にあるのでテキストエディタは「管理者権限として実行」で動かさないと上書きできないので注意が必要です。
    ファイルのパスは環境によって違うかもしれませんので自分で調べてください。

    修正後は無事に動きました。

  • wp.Vicuna のライセンスについて

    wp.Vicunaライセンス

    利用するCMSのライセンスがコピーレフトである場合はCMSのライセンスに従い、そうでない場合はMITライセンスとして配布します。 個人・商用問わず利用が可能です。ビジネスサイトの構築や、wp.Vicunaを使用して第三者から有償でWEBサイトの構築を請け負うことができます。このライセンスはvicuna.jpで配布しているスキンにも適用されます。

    WordPressのライセンスは GPL(GNU General Public License) です。

    利用するCMSのライセンスがコピーレフトである場合はCMSのライセンスに従い

    とあるのでwp.vicunaはWordPressと同じGPLライセンスになります。

    GPLライセンスの特徴

    1. 著作権表示を保持しなければならない+無保証である
    2. GPLライセンスのオープンソース・フリーソフトウェアは、誰でも自由に複製・改変・頒布することが許可されている
    3. GPLライセンスのソフトウェアやプログラムを使用した場合、その制作物もGPLライセンスで配布しなければならない

    誰でも再配布可能ということです。
    本家サイトが無くなってしまいましたのでこちらで再配布しています。
    wp.vicuna Download

  • Gumbyを使ってPageTopに戻るボタンを作ってみる

    最近よく見かける画面の右下に「PAGE TOP」に戻るボタンをGumbyを使って表示します。
    WordPressのfunctions.phpに追加
    簡単にできるようにCSS/Javascriptもインライン化していますが
    別ファイルに記載しても良いと思います。

    function gumby_page_top() { ?>
    	<div id="return" class="pretty medium info btn">
    		<a href="#header" class="skip" gumby-goto="#header" gumby-offset="-60">PAGE TOP</a>
    	</div>
    	<style>
    		#return {
    			position: fixed;
    			bottom: 20px;
    			right: 20px;
    			opacity: 0.8;
    		}
    	</style>
    	<script defer>
    		jQuery(function() {
    			var returnBtn = jQuery('#return');    
    			returnBtn.hide();
    			jQuery(window).scroll(function () {
    		        if (jQuery(this).scrollTop() > 100) {
    		            returnBtn.fadeIn();
    		        } else {
    		            returnBtn.fadeOut();
    		        }
    		    });
    		});
    	</script>
    <?php
    }
    
    add_action('wp_footer','gumby_page_top');
    

    こちらのサイトを参考にさせていただきました。
    jQueryでスクロールすると表示する系いろいろ

  • WordPressでGumbyをCDNから使う方法

    GumbyFramework – cdnjs.com

    cdnjs.comからGumbyのJavaScript/CSSライブラリを参照することができます。

    functions.phpに追加

    CSSとJavascriptを両方CDNから読み込む場合

    function gumby_enqueue_stylesheet() {
    	wp_enqueue_style('gumby-style', '//cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/css/gumby.min.css' );
    }
    function gumby_enqueue_scripts() {
    	wp_enqueue_script( 'modernizr' , '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js' );
    	wp_enqueue_script( 'gumby'     , '//cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/js/libs/gumby.min.js' );
    	}
    }
    add_action( 'wp_print_styles', 'gumby_enqueue_stylesheet');
    add_action( 'wp_print_scripts', 'gumby_enqueue_scripts');

    JavascriptはCDNからCSSは自分で編集した物を使いたい場合

    function gumby_enqueue_stylesheet() {
    	wp_enqueue_style('gumby-style', get_template_directory_uri().'/css/gumby.css' );
    }
    function gumby_enqueue_scripts() {
    	wp_enqueue_script( 'modernizr' , '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js' );
    	wp_enqueue_script( 'gumby'     , '//cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/js/libs/gumby.min.js' );
    	}
    }
    add_action( 'wp_print_styles', 'gumby_enqueue_stylesheet');
    add_action( 'wp_print_scripts', 'gumby_enqueue_scripts');

    こんな感じですかね。

  • Gumbyで使うSassコンパイラGUIを「Prepros App」に変更しました

    Gumbyで使うSassコンパイラGUIを「Prepros App」に変更しました

    こちらの記事で紹介したSCOUTがなぜかエラーを吐くようになってしまったので、
    SassコンパイラをPreprosに変更しました。

    バージョンが4.2に上がったおかげか以前出ていたコンパイルエラーがなくなりました。エラーで続けてます。やっぱりおすすめは「SCOUT」
    もともとはPreprosを使いたかったので速攻で乗り換えです。
    Windowsでは一番使いやすいと評判のSassコンパイラですからね。
    (さらに…)