OSをMavericks => El Capitan にしたらIDEなどでscssが使えなくなった

ようやくMacOSを Mavericks から El Capitanにしてみました。
Homebrewの問題などはいくつかの記事を見てなんとかなった。ところが普段使っているphpstormでscssコンパイルができなくなった。
gem listではsassとscssは認識されている。

とりあえずsassとscssのgemを再インストールしてみようとuninstallは出来たものの、
インストールができない様子。

$ sudo gem install sass
Password:
ERROR: While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass

sudoにしてるのにnot permittedとなってしまう。
探したらこちらに解決法がありました。

https://github.com/sass/sass/issues/1768

ここに書いてあるように

sudo gem install -n /usr/local/bin sass
sudo gem install -n /usr/local/bin scss

このコマンドでインストールができました。

IDEなどでの設定(phpstormではwatcher)のsassのパスはこれで大丈夫でした。

/usr/local/bin/scss

↑以前は/usr/bin/scss
scss-lintなども同様に使えなくなっていました。

これ以上の詳しいことはあまり理解できていないのですが、
これでphpstormなどでは元どおり使えるようになりました。

追記:こちらの記事で not permitted になる理由が理解できました。

WordPressの body_class()にページスラッグの決定版

以前書いた記事WordPressの body_class()にページスラッグをの発展型です。
functions.phpに以下を追加。

<br />
function pagename_class($classes = '') {<br />
    if (is_page()) {<br />
        $page = get_post(get_the_ID());<br />
        $classes[] = 'page-' . $page->post_name;<br />
        if ($page->post_parent) {<br />
            $classes[] = 'page-' . get_page_uri($page->post_parent) . '-child';<br />
       }<br />
  }<br />
  return $classes;<br />
}<br />
add_filter('body_class', 'pagename_class');<br />

6行目 get_page()がdeprecatedになっていたのでget_post()に変更しました

これで、<body>タグに
ページスラッグのclass
.page-[pagename]
と、親ページを持つ場合は
その親ページスラッグのコページであることを示すclass
.page-[parent-pagename]-chid
が追加され、ページ投稿でのデザインの振り分けが自由自在になりそうです。

WordPressのwp_nav_menu()で
  • タグのみ出力したい
  • WordPressのテーマを作る際、wp_nav_menu()は便利ですが、
    デフォルトだと<div>と<ul>タグが出て来てたまに邪魔になるときがあります。

    <br />
    $args = array(<br />
               'container' => '',//</p>
    <div>を出力しない<br />
               'items_wrap' => '%3$s',//</p>
    <ul>を出力しない<br />
                  );<br />
    wp_nav_menu($args);<br />
    
    

    こうすると<li>タグのみ出力されます。
    ここで
    'items_wrap' => ''
    

    としても
    'items_wrap' => false
    

    でも<li>自体が表示されません。
    <div>タグを消す方法はすぐ分かったのですが、<ul>がうまいこと消えなくて、
    でもよくよく調べると英語版のcodexにもちゃんと書いてありました。にしてもやはり、ソースを良く読めば分かったことではありました。

    これが使えれば、「外観>メニュー」の項目を複数組み合わせて細かく使い分けたり、
    「外観>メニュー」で設定できない項目を並べたりも出来ますね。

    WordPressでアメブロなど外部RSSの「PR:」から始まる広告をはじく

    WordPressのSimplePieオブジェクトを使ってアメブロなど(っていうかほとんどアメブロ)の外部RSSのデータを表示するとき。
    「PR:」からはじまる広告をはじく、のをショートコードにしたもの。

    まだ不完全ですがメモ程度に。

    functions.phpに以下を追加。

    <br />
    if ( !function_exists( "my_rss" ) ) {<br />
        function my_rss( $atts ) {<br />
            extract( shortcode_atts( array(<br />
                        'rss' => '',<br />
                        'nom' => '5',<br />
                            ),$atts ) );<br />
            $feed = fetch_feed( $rss );<br />
            $str = '';<br />
            $blog_title = $feed->get_title();<br />
            $str .= '</p>
    <ul class="my_rss">
                ';<br />
            foreach ( $feed->get_items(0,$nom) as $key => $item ) {<br />
                $entry_title=$item->get_title();<br />
                if (!preg_match("/^PR:/", $entry_title)){<br />
                //↑ここで「PR:」をはじいている<br />
                $str.= '</p>
    <li><a href="' . $item->get_permalink() . '">' . $entry_title . '</a>';<br />
                $str.= ' <small>' . $item->get_date( '(n/j)' ) . '</small></li>
    <p>';<br />
                //このあたりはお好みで<br />
            }<br />
          }<br />
            $str.='
                </ul>
    <p>            ';<br />
            return $str;<br />
        }<br />
    }<br />
    add_shortcode( 'myrss','my_rss' );<br />
    
    

    これで
    [myrss rss=RSSのURL nom=投稿数(デフォルトで5)]
    

    などとする。
    ただこのままだと「PR:」があるとそのぶん表示数が減ってしまいますね。

    ところでショートコードをウィジェットで使うときは functions.phpに

    add_filter( 'widget_text','do_shortcode' );
    

    を追加すれば出来るんですね。

    FuelPHP Ormオブジェクトのリレーションでひっかかった

    ここんところ、wordpressは相変わらずずっとやりつつも、新しめのPHPフレームワーク「FuelPHP」を勉強しています。

    まだまだフレームワーク初心者で、ほかのフレームワークなどでもちゃんと扱ったことがないせいか、DBテーブルのリレーションの使い方でひっかかっのでここにメモします。
    “FuelPHP Ormオブジェクトのリレーションでひっかかった” の続きを読む

    &fictionサイトリニューアルしました

    ムニエルでずっとお世話になってた、上田君らのクリエイティブスタジオ、&fictionのサイトをリニューアルしました。

    デザインは上田君です。左上のカラフルな波みたいのが、うにゅうにゅ動きます(ふつうのアニメgifです)。サムネールをマウスオーバーするとアニメーション(これもアニメgif)になったりします。

    記事の投稿が極力簡単になるように、wordpressのカスタムフィールドやpost_thumbnail()の機能をカスタマイズして多用してます。
    また、テンプレート階層の仕組みを使ってテンプレートを切り替えています。

    WordPressの body_class()にページスラッグを

    WordPressテーマのheader.phpあたりにある

       <body <?php body_class(); ?>>
    

    こと細かにclassが出力されるので便利だけど、pegeの内容ごとにデザインを変えたい場合、デフォルトだとpageのslugが出てこないので不便です。
    そこでcodexのbody_class()をみると、簡単に拡張できる仕様になっていることが分かりました。なので例えばこんなかんじにすればもっと助かります。
       <body <?php
            if (is_page()) {
                $page = get_page(get_the_ID());
                $slug = $page->post_name;<br />
                body_class("page-" . $slug);<br />
            } else {<br />
                body_class();<br />
            }<br />
            ?>>
    

    ほかにも条件分岐によってかなり柔軟なclass割り当てができますね。

    2013/6/27追記

    このような記事を見つけました。こちらのほうがずっとスマートですね。
    functions.phpに以下を追加します。

    function pagename_class($classes = '') {<br />
             if (is_page()) {<br />
                 $page = get_page(get_the_ID());<br />
                 $classes[] = $page->post_name;<br />
             }<br />
    	return $classes;<br />
    }</p>
    <p>add_filter('body_class','pagename_class');
    

    2014/3/16追記

    親ページについても表示できるように、この記事をさらに実用的にしました。
    → WordPressの body_class()にページスラッグの決定版

    タイムテーブル作成スクリプト

    何か小劇場に役立つwebアプリを作ろうとずっと考えているのですが、タイムテーブルのhtmlをGUIで入力した通りに作れるスクリプトをjQueryで書いてみました。

    http://stage.ready.jp/timetable/
    例)こんなテーブルのタグがかんたんに出来ます。

    2/5 2/6 2/7
    14:00
    18:00
    19:00

    できたhtmlはそのままタイムテーブルや、残席情報などに使えます。
    構造はシンプルなもので、今はただhtmlを書き出すだけなので実用性はまだちょっと低いです。htmlが多少分かる人でないと使えないかもです。いずれはそのままブログに埋め込んだり、残席情報などを画像でツイッターにツイートできたりするようになったらいいなあ。

    wordpressでtwitter widgetを使う時ヘッダ部分がおかしい

    wordpressでデフォルトのテーマであるtwentyten,twentyeleven(やその小テーマ)などを使っていて、twitter公式サイトからのウィジェットをwordpressのwidgetに追加すると、そのウィジェットのヘッダ部分がなんかおかしくなる。

    アイコン画像の右下にtwitter名が回り込んでしまう。
    “wordpressでtwitter widgetを使う時ヘッダ部分がおかしい” の続きを読む