カテゴリー: web

投稿日:

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に以下を追加。
[sourcecode language=’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’);
[/sourcecode]

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

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

投稿日:

WordPressのwp_nav_menu()で
  • タグのみ出力したい

    • WordPressのテーマを作る際、wp_nav_menu()は便利ですが、
    デフォルトだと<div>と<ul>タグが出て来てたまに邪魔になるときがあります。
    [sourcecode language=’php’]
    $args = array(
    ‘container’ => ”,//

    を出力しない
    ‘items_wrap’ => ‘%3$s’,//

      を出力しない
      );
      wp_nav_menu($args);
      [/sourcecode]
      こうすると<li>タグのみ出力されます。
      ここで
      [sourcecode language=’php’]’items_wrap’ => ”[/sourcecode]
      としても
      [sourcecode language=’php’]’items_wrap’ => false[/sourcecode]
      でも<li>自体が表示されません。
      <div>タグを消す方法はすぐ分かったのですが、<ul>がうまいこと消えなくて、
      でもよくよく調べると英語版のcodexにもちゃんと書いてありました。にしてもやはり、ソースを良く読めば分かったことではありました。

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

    投稿日:

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

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

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

    functions.phpに以下を追加。
    [sourcecode language=’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 .= ‘

    投稿日:

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

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

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

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

    投稿日:

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

    WordPressテーマのheader.phpあたりにある
    [sourcecode language=’php’] >[/sourcecode]
    こと細かにclassが出力されるので便利だけど、pegeの内容ごとにデザインを変えたい場合、デフォルトだとpageのslugが出てこないので不便です。
    そこでcodexのbody_class()をみると、簡単に拡張できる仕様になっていることが分かりました。なので例えばこんなかんじにすればもっと助かります。
    [sourcecode language=’php’] post_name;
    body_class(“page-” . $slug);
    } else {
    body_class();
    }
    ?>>[/sourcecode]
    ほかにも条件分岐によってかなり柔軟なclass割り当てができますね。

    2013/6/27追記

    このような記事を見つけました。こちらのほうがずっとスマートですね。
    functions.phpに以下を追加します。
    [sourcecode language=’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’);[/sourcecode]

    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を使う時ヘッダ部分がおかしい” の続きを読む