Toshiro Shimura's Library tagged sidebar →  View Popular

過去幾度無くAppleサイトのサイドバーの再現に挑戦したのですが、中々思うようにできなかったのですが、jQueryを使用して再現するチュートリアルを参考にしてやってみたら、やっと私も当ブログのサイドバーに導入できたー！の導入メモ。





• 参考サイト: Slide out and drawer effect | jQuery for Designers - Tutorials and screencasts
• ダウンロード:
  
  • jQuery: The Write Less, Do More, JavaScript Library
  • Dimensions | jQuery Plugins
  • jQuery plugin: Accordion
  
  



ダウンロードしたjQueryとDimensions, accordion plugin をjsフォルダにアップロードし、下記CodeをWordpress theme のヘッダーにに読み込みます。

ウィジェットに対応していないテーマの修正

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

もっとも簡単で無理矢理な方法はWordPress Widgetsからダウンロードしたwidgetsフォルダのclassicフォルダからsidebar.php　functions.phpを、非対応テーマフォルダに上書きする。wordpressに標準で入っているテーマclassicに含まれるサイドバーで問題ない場合はこの方法が楽。しかしテーマにもともとfunctions.phpがある場合はこの方法はやめたほうがよい。基本的にはお勧めしません。（おそらくwordpress標準テーマをWidgets化するためのファイルです。）上書きする際はバックアップを忘れずに。

非対応テーマのサイドバーをいかしたままWidgetsに対応させる

参考程度に。Sidebar WidgetsREADME.txtを参照のこと。

それぞれのテーマのsidebar.phpの一番初めの<ul>の次の行に以下のコードを加える。

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>さらに最も最後の<ul>の直前に

<?php endif; ?>を加える。

サイドバーが複数ある場合の対応方法。

基本的には非対応テーマのサイドバーを生かしたままWidgetsに対応させるの方法と同じ。異なるのはsidebar.phpに加えるコードのdynamic_sidebar()の()の中に数字を入れる点。

サイドバーが２つの時。それぞれのsidebar.phpに以下を加える。

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>

<?php endif; ?>を入れ忘れないように。

さらにfunctions.phpのregister_sidebar();にサイドバーの数と同じ数字を入れる。

<?php

if ( function_exists('register_sidebars') )

    register_sidebars(2);

?>

このようにすればサイドバーが複数あるテーマにもSidebar Widgetsを対応させることが出来るはず。サイドバーがさらに多い場合も入れる値の数字を大きくしていけば対応できるのではと想像。

ところが、ウィジェットに対応していないテーマでは以下のような画面になります。

このようなテーマに対しては、以下の修正を加えたらウィジェットの管理画面が現れるようになりました。

１．　「sidebar.php」の修正

sidebar.phpに赤字部分を追記します。

    <div id="links-right-box">
    <div id="links-right">
    <div id=”sidebar”> <ul>

    <?php if ( !function_exists(’dynamic_sidebar’)
            || !dynamic_sidebar(1) ) : ?>

      <?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

      <li><h2>Categories</h2>
                <ul>
       <?php wp_list_cats(’sort_column=name&optioncount=1&hide_empty=0&exclude=1&hierarchical=1′); ?>
                </ul>
            </li>

            <li><h2 class=”sidetitle” id=”archivesname”>Archives</h2>
            <ul class=”sidetitle” id=”archiveslist”><?php wp_get_archives(’show_post_count=true’); ?></ul>
            </li>

    <?php endif; ?>

     </ul>
    </div>
    </div>
    </div>

サイドバーを増やすときには、!dynamic_sidebar(2), !dynamic_sidebar(3)　…　と変更すればいいと思います（サイドバー２つまでは確認済）。

２．　「functions.php」の作成 以下の文字を入力してphpで保存します。

<?php
if ( function_exists('register_sidebar') )

    register_sidebar(1);
?>

サイドバーを増やすときには、register_sidebar(2);dynamic_sidebar(3);　…　と追加していけばいいと思います（サイドバー２つまでは確認済）。例えば、こんな感じです。

<?php
if ( function_exists('register_sidebar') )
register_sidebar(1);
register_sidebar(2);
?>

しかし、たぶんもっとスマートなやり方があるのだろうと思います。

これによって，サイドバーを構成する部品の変更(追加，削除，並び順の変更)がAjaxによってドラッグアンドドロップで行えるようになる．新たな部品の追加も，ウィジェットが公開されていれば簡単に行うことができるようになる．




この導入は，いままでよりちょっと難しかった．テーマにちょこっと追記が必要になる．





1. ファイルをダウンロードして，wp-content/plugin 以下に展開
   
2. 管理画面>プラグイン で，Sidebar Widgets を有効化
   
3. 現在利用中のテーマのサイドバーファイル(sidebar.php)を編集
   [EasyAllの場合]
   
   
   
   
   
   1. ファイルの最初に現れる <ul> タグの直後に次を追加
      <?php if (
!function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :
?>
      最後はセミコロン(;)ではなくコロン(:)なので注意
      
   2. ファイルの最後に現れる </ul> タグの直前に次を追加
      <?php endif; ?>
      
   3. 現在利用中のテーマの functions.php に次を追加．存在しない場合は新規に作成
      <?php
if (
function_exists(’register_sidebar’) )
register_sidebar();
?>
      
   4. 管理画面>表示 に サイドバーウィジェット というメニューが追加される
      
   5. 完了
   
   

   あとは，Available Widgets の中から利用したいウィジェットを Sidebar1
   にドラッグして，変更を保存するだけでサイドバーを編集することができるようになる．便利なウィジェットが多数あるはずなので，どんどん追加するとよいでしょう．僕も後日探す予定．今日は基盤の導入まで．

   
   

   ちなみに，今回のプラグインの導入は WordPress標準ガイドブック p.223-231 を参照して行った．

新しくフォトブログを作ったけど、今のブログとはまったく別物になるために、サイドバーにフォトログの写真のサムネイルを表示させることに。

ブログIDが異なるので、MT標準では記事のやり取りができないため、フォトブログで特別なRSSを吐き出し、procfeedにて成型し、再びサイドバーに貼り付けることに。

HINAGATAのテンプレートではサムネイルはキーワードに貼り付けるため、titleがキーワードになるようなRSSを作成。つまりRSSフォーマットではありますが、厳密にはRSSではありません。

RSS Feed（フィード）をブログのサイドバー等に表示するテクニックです。方法は色々あるみたいですが、ここでは「Feed2JS」を利用した方法を紹介します。

Feed2JS はフリーのツールです。RSS フィードを HTML として表示させる仕組みは、まずこの Feed2JS に対し、ブログに表示したい RSS フィードのURLを入力して、それに対応する JavaScript を生成します。そしてこの JavaScript をブログに貼り付けまておきます。あとはページを表示することで、JavaScript から Feed2JS のPHPを起動し、さらにPHPのプログラムから RSS フィードを取得し、HTML に変換して表示する、という訳です。
異なるドメインのRSSも利用することができ、表示方法もきめ細かい設定が可能で、単純なテキストとして取得することも可能です。

Feed2JS はサービスとして利用することもできますが、このエントリーでは公開されているソースをご自身がご利用されているサーバにインストールして利用するカスタマイズについて説明します。したがってサーバ上で PHP が動作可能であることが条件です。

この方法であれば、自分の利用しているサーバでツールを起動させるため（多分）レスポンスが良くなります。なお、ツールをインストールできない場合は「RSS Feed（フィード）を表示する（サービス利用編）」を参照ください。

これら3つのサービスは、今後出てくるものの始まりに過ぎない。他の企業も大急ぎでブラウザサイドバーのアドオンを出してくるだろう。しかし皮肉なことが1つある。ユーザーはサイドバーを1つしか持てないのだ。1人のユーザーはサイドバーにIMクライアントを入れるかソーシャルネットワークを入れるかのどちらかで、両方を使うことはできない。それがブラウザのスタートページになるからだ。これが、サイドバーの利用をユーザーや注目を集めるための戦術として使う際の限界となるだろう。

　それでもサイドバーがオンラインサービスから見て最も魅力的なスペースである以上、この場所は戦場になるだろう。大手プレーヤーはブラウザベンダーと提携して、現在ツールバーで行っているようにサイドバーをブラウザそのものと一緒に出荷するだろう。このため、複数のGoogleサービスの機能を持ち、今後Firefoxと一緒に出荷されるであろう「Googleサイドバー」には注目するべきだ。

サイドバーガジェットとLiveガジェットの違い

　すでに1回目でも説明したように、「Vistaサイドバーガジェット」と「Liveガジェット」とでは、互換性がない。

　大きな違いは、Liveガジェットの場合には、コンストラクタ、initializeメソッド、disposeメソッドといった仕組みでガジェットを構成していくのに対し、サイドバーガジェットの場合には、そのようなメソッドを使わないという点だ。

　サイドバーガジェットは、端的に言えばWindows Vistaのデスクトップ上に、「HTMLを表示するための小さなウィンドウ」を用意し、そこにマニフェストで定義したHTMLを表示するというだけの機能にすぎない。

　実際、マニフェストファイルとなっているリスト6では、次のようにしてリスト7のHTMLファイルを指定している。

"<base type="HTML" src="http://www.itmedia.co.jp/MyGadget.html" /">

　これによってリスト7のHTMLがサイドバーガジェットとして表示される。

　リスト7の中を見ると分かるが、これは一般的なHTMLとJavaScriptのコードの組み合わせであり、サイドバーガジェットに特有の機能は使っていないことが明らかだ。

　強いて言えば、次のようにサイドバーガジェットのサイズを設定するために、body要素にCSSを設定している程度だ。

"<body style="width:300px;height:200px;"">

　そのためサイドバーガジェットは、Liveガジェットに比べ、はるかに作成が容易だ。

　もし、Webアプリケーション向けの小窓で動くJavaScriptアプリケーションを開発しているなら、マニフェストファイルを作るだけで、サイドバーガジェット化が可能であろう。