カテゴリー: Blog

WordPress の add_action (子テーマ使ったカスタマイズ)

もうほぼ、下記のリンク先
【WordPress】 子テーマを使ったカスタマイズについて(functions.php編)

functions.phpはstyle.cssとは実行順序が違って、子テーマが先で親テーマがあとみたい。

だもんで、
関数リファレンス/add action – WordPress Codex 日本語版
ここの

add_action( $hook, $function_to_add, $priority, $accepted_args ); 

 

$priority で順序指定して上書きすればええんやー

 

テーマで $content_width とか指定してある時とかこれ使いなさいよ自分

Twenty Seventeen で フロントページのセクションを増やす

Twenty Seventeen で フロントページのテーマオプションのセクション
デフォルトだと4つ
もっと使いたいんだよねーって検索検索

ありましたー
How to Add Extra Twenty Seventeen Theme Front Page Sections – WPColt

自分の書き方に合わせて

//フロントページ テーマオプションのセクションの数を設定
add_filter( 'twentyseventeen_front_page_sections', 'wpc_custom_front_sections' );
function wpc_custom_front_sections( $num_sections ) {
  return 7; //Change this number to change the number of the sections.
}

height auto でも transitionさせたい

height: 0; から height: auto; を行ったり来たりとか、
height: Xem; からheight: auto; を行ったり来たりするときにも、transitionかけたいけど効かないじゃないですかー。

冷静に探したらありましたですよ。
CSS3 transition height 0 to auto

max-height にまあ安全な大きめの数値入れとけば一応transitionかかる。
けれども、あまり巨大な数値を入れておくと、
そこから戻ってくるイメージなんで、初期の反応がえらい鈍くなる。
(※詳しくはよく知らない)

だもんで、duration も短めで、巨大すぎないまあ安全な大きめの数値入れとくのがベターか。

当たり前のとこでハマるjQuery

blog書くまでもないけど・・・。jQueryは既に世に出て結構時間が経っている。

検索して引っかかるのが今のバージョンで動くとは限らない。んでjQuery1.12で動かなかったセレクタの例↓

$('a[href^=#]').click(function() {

こうが正しい↓

$('a[href^="#"]').on('click',function(){

IE9対応でwindow.matchMediaが使えない時

完全にこのBlogのこと忘れてた。講座でBlogはーとか言ってて全く書いてないのもアレなんで久々のIE9対応、window.matchMediaも使えない。やり方忘れとったんでメモメディアクエリで表示切り替えしてる部分があると思うので

まあ下記のようなイメージで

$(function() {
  $(window).on('load resize', function(){
    if ( $('#mdContent').is(':visible') ) {
      console.log('md');
    } else if ( $('#smContent').is(':visible') ){
      console.log('sm');
    } else if ( $('#xsContent').is(':visible') ){
      console.log('xs');
    }
  });
});

しかし、タスクランナーとかな慣れきってたのか、直にcssとかゴリゴリ書くの意外と大変

はじめてのCoffeeScript

いまさらながらCoffeeScript書き出している。たった数行の動いているJavaScriptをCoffeeScriptにしようとしたら、動かなかった。公式サイトには、CoffeeScript→JavaScriptはあるが逆はない。ググったら下記のサービス発見

それでも解決できなかった。ちなみに下記のようなコード

var myApp = angular.module('myApp', []);

var myController = myApp.controller ('myController',function($scope){
  $scope.change = function(){
    //処理
  }
});
  

色々ググッてみてたら、先人の方のありがたい記録を発見

んでこうなって動いた

'use strict'

angular.module('myApp',[])
  .controller 'myController',[
    '$scope'
    ($scope) ->
      $scope.change = ->
        #処理
  ]
  

動いて嬉しかったので、思わずブログに書いた。&よく使いそうなんでメモ。

Bracketsが相当使えるんじゃないかと

SublimeText と恋に落ちてたんであまり触ってなかったんだけど、Brackets は相当使えるように進化していると思うので、しばらくは浮気しようと思います。

Brackets のポイント

  1. Dreamweaver CCのExtract なあれ PSDデータから色々する奴

  2. クイック編集(インライン要素)

    簡単にいえば、デベロッパーツールが凄く賢くなった感じ。

    Cmd-Eで該当部分のスタイルとかがインラインで出てくる。

    こちらとしては、ファイルのタブも遷移しなくていいので楽。

  3. ライブプレビュー

    元々CSSEditを愛してたので、最近の状況に対応したライブプレビューは嬉しい。

    タスクランナー設定するまでもないようなモノでもライブプレビュー。

オレオレ設定等

 

EmmetのExpandをCtrl-Eにした

ちなみに自分はMac。他のエディタでもCtrl-EでExpandしてるんで合わせたかった。

Tabを当ててる人はEmmetの設定で、チェックボックス入れるだけでいい。

キーバインドをSublimeTextと合わせた

https://github.com/adobe/brackets/wiki/User-Key-Bindingsここに書いてある通り

ユーザーキーマップはこうなった

{
        "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
        "overrides": {
            "Cmd-Shift-L":     "edit.splitSelIntoLines",
            "Ctrl-Shift-Up":   "edit.addCursorToPrevLine",
            "Ctrl-Shift-Down": "edit.addCursorToNextLine",
            "Cmd-Shift-D":     "edit.duplicate",
            "Ctrl-Shift-K":    "edit.deletelines",
            "Cmd-L":           "edit.selectLine",
            "Cmd-D":           "cmd.addNextMatch",
            "Cmd-Opt-1":       "cmd.splitViewNone",
            "Cmd-Opt-2":       "cmd.splitViewVertical",
            "Cmd-Opt-Shift-2": "cmd.splitViewHorizontal",
            "Ctrl-G":          "navigate.gotoLine",
            "Cmd-Opt-Right":   "navigate.nextDoc",
            "Cmd-Opt-Left":    "navigate.prevDoc",
            "Cmd-R":           "navigate.gotoDefinition",
            "Cmd-P":           "navigate.quickOpen",
            "Ctrl-E":          "io.emmet.expand_abbreviation"
        }
    }

最後の行がEmmetのキーバインドでその他はSublimeTextと合わせる用

エイリアスに追加すると便利:忘れてたので、2015.1.2追記

atomなんかは、何もしなくても、ターミナルから

atom hoge.futa

とか

atom .

とかでatomで開けて便利なんだけど、Bracketsはできない。 正しくは、Terminalからファイル名を指定してBracketsを開く – Qiita のようにシェルスクリプトかな?と思って試したけどうまく動いてくれなかった。 「じゃあ、単なるエイリアスでいいか」って感じで、.bash_profileに

alias brackets="open -a /Applications/Brackets.app"

って追記した。

brackets hoge.futa

とか

brackets .

とかでBracketsで開けて便利になった。 しかし、bracketsは打つのがダルいな。bra位にするかな。