ブログ

  • 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コンパイラですからね。
    (さらに…)

  • WordPressのプラグインやテーマを自動アップデートする

    WordPressのプラグインやテーマを自動アップデートする

    一つのWordPressのみを運営している場合は良いですが
    複数のWordPressを運営していると少し放置しただけで
    プラグインやテーマのアップデートがどんどん溜まっていってしまいます。
    プラグインなどはアップデートを放っておくとセキュリティ面で不安が出てきます。
    (さらに…)

  • WordPressのBody Classに閲覧ブラウザを追加する

    ユーザーエージェントを読み取ってブラウザを判別しbody_class()にadd_filterを使ってフックさせます。
    閲覧ブラウザによってcssを変えたいときにCSSハックを使わなくても

    .ie6 {
    color: green;
    }

    などとすればIE6だけにCSSを適用するようにできます。
    条件付きコメントもCSSハックも使いたくないときに使ってみてはどうでしょうか?

    /**
     * Get browser_class
     */
    function rye_browser_class(){
    	$classes = "";
    	$agent = getenv( "HTTP_USER_AGENT" );
    	if(preg_match('/Trident/',$agent)){
    		$classes .= "msie ";
    		if(preg_match('/MSIE 6.0/',$agent)) $classes .= "ie6 lt7 lt8 lt9";
    		if(preg_match('/MSIE 7.0/',$agent)) $classes .= "gt6 ie7 lt8 lt9";
    		if(preg_match('/MSIE 8.0/',$agent)) $classes .= "gt6 gt7 ie8 lt9";
    		if(preg_match('/MSIE 9.0/',$agent)) $classes .= "gt6 gt7 gt8 ie9";
    		}
    	else {
    		$classes .= "noie ";
    		if(preg_match('/Firefox/', $agent)){
    			$classes .= "firefox";
    		}
    		elseif(preg_match('/Chrome/', $agent)){
    			$classes .= "chrome";
    		}
    		elseif(preg_match('/Safari/', $agent)){
    			$classes .= "safari";
    		}
    		elseif(preg_match('/Opera/', $agent)){
    			$classes .= "opera";
    		}
    		elseif (preg_match('/iPhone/',$agent)) {
    			$classes .= "iphone";
    		}
    		elseif (preg_match('/iPad/',$agent)) {
    			$classes .= "ipad";
    		}
    		elseif (preg_match('/Android/',$agent)) {
    			$classes .= "android";		
    		else
    		{
    			//other
    		}
    	}
    	return $classes;
    }
    /**
     * Add body browser class
     */
    function rye_add_browser_class($classes){
    	$classArr = explode(" ",rye_browser_class());
    	$return = array_merge($classes,$classArr);
    	return $return;
    }
    add_filter("body_class","rye_add_browser_class");
    ?>
  • XreaからValueServer(スタンダード)に乗り換えた感想

    Xreaからバリューサーバーに引越して約一か月、使用感を書いてみたいと思います。

    バリューサーバーの管理画面が6/25から変更されたので前よりも見やすくなって使いやすくなりました。
    (さらに…)

  • IEでWebフォントを読み込めない!@font-face が cross-origin 要求に失敗しました。

    IEで当サイトを見たらWebフォントがうまく読み込まれていません。
    IETesterで各バージョンのIEで閲覧したところIE9以降で不具合が出ていました。
    右クリックから要素の検査で調べてみると

    @font-face が cross-origin 要求に失敗しました。リソース アクセスが制限されています。

    となっていました。
    (さらに…)

  • WordPress 投稿記事内に「<」や「>」を入れる方法

    その方法はhtmlタグの一部を特殊文字で記述するというものです。記述方法は以下の通り。
    「<」は「&lt;」に。「>」は「&gt;」にそれぞれ置き換えます。

    <br>だったら以下のように記述します。

    &lt;br&gt;

  • WordPress 投稿の自動整形を無効化するプラグイン「PS Disable Auto Formatting」

    PS Disable Auto Formatting

    WordPressで投稿記事を書いていると予期せずに改行<br>や<p>タグが入れられてしまいます。

    これを回避するためにPS Disable Auto Formattingを入れます。

    プラグイン検索から「PS Disable Auto Formatting」を検索。

    インストールご有効化を忘れずに!!

    インストール後に過去記事を修正しなければいけない可能性があります