カテゴリー: wordpress

投稿日:

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 .= ‘

      ‘;
      foreach ( $feed->get_items(0,$nom) as $key => $item ) {
      $entry_title=$item->get_title();
      if (!preg_match(“/^PR:/”, $entry_title)){
      //↑ここで「PR:」をはじいている
      $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()にページスラッグの決定版

    投稿日:

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

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

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

    投稿日:

    ブログデザイン変更しまして

    ブログデザインを変更して、なんかようやくスッキリしました。
    （wordpress最新のデフォルトテーマtwentyelevenの小テーマに挑戦してみました。）

    個別記事のtweetボタンをつけてみたら、アクセスが多かったページでは、少ないながらもつぶやかれた数が出てるってことにちょっと感動しました。アクセス多めのページなのに読み返してみるとあまりの文章の読みにさに反省しました。
    修正もできればしつつ、もうちょっと読みやすく書く努力をしようと思います。

    投稿日:

    wordpressテーマでjQueryを使って簡易なajaxページ遷移

    wordpressのテーマ内でajaxを使ってのページ遷移は、jQueryの.load()を使うと意外と簡単にできそうです。
    $jQuery.load()を使えば、自分のサイト内のページの任意の箇所を非同期通信で読み込んで現在のページの任意の場所に表示させるというアクションが、基本的にはたった一行でできます。すごいですよね。大体こんなかんじです。
    [sourcecode language=’javascript’]$(‘表示させる箇所のセレクタ’).load(‘サイト内のURL 表示させたい箇所のセレクタ’);[/sourcecode]
    で、wordpressのテーマ内でも同様に使えます。

    例として、デフォルトのテーマであるtwentytenを使った場合のシングルページでのやり方。 “wordpressテーマでjQueryを使って簡易なajaxページ遷移” の続きを読む