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に以下を追加。


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

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>タグが出て来てたまに邪魔になるときがあります。

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

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

    'items_wrap' => ''
    

    としても

    'items_wrap' => false
    

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

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

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

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

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

    functions.phpに以下を追加。

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

    これで

    [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;
                body_class("page-" . $slug);
            } else {
                body_class();
            }
            ?>>
    

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

    2013/6/27追記

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

    function pagename_class($classes = '') {
             if (is_page()) {
                 $page = get_page(get_the_ID());
                 $classes[] = $page->post_name;
             }
    	return $classes;
    }
    
    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を使う時ヘッダ部分がおかしい” の続きを読む