サポート » テーマ » サイドバーをもう1つ増やしたい

  • 解決済 hohoho123

    (@hohoho123)


    wordpress初心者です

    ① 現在Wordpress Lesson 本を読みながら勉強しているのですが
    1つ目のサイドバー追加方法はわかるのですが、
    2つ目のサイドバーはどうすれば作れるでしょうか?

    サイドバー追加方法を教えてください。サイドバーは右側に2つ表示させる予定です。

    ② また、1つ目のサイドバーを作成したのはいいのですが
    サイドバーが右側に偏ってしまい、中央の記事と離れてしまいます
    一応

    div#sidebar ul {margin:0;padding:0}
    を書きましたが効果がありません。

    <?php if(is_home()):?>
    <p class=”pagelink”>
    <span class=”oldpage”>
    <?php next_posts_link(‘«古い記事’);?></span>

    よろしくお願いいたします

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • 1つがわかるなら、2つでも3つでもわかるんじゃないかと思いますが、具体的にどのようにやりましたか?

    kvexさん 以前のコメントありがとうございました。

    サイドバーを作ったやり方は
    ①問題
    ●index.php
    <!..サイドバー1..>
    <div id=”sidebar”>

      <?php dynamic_sidebar();?>

    </div>

    ●/*サイドバー*/
    div#sidebar {width:220px;float:right}
    div#sidebar ul{margin:0;padding:0}
    div#sidebar li {list-style-type:none}
    div#sidebar .widget{background-color:#3300FF;padding:16px;margin-bottom:10px}

    div#sidebar h2{font-size:0.75em;color:#ffffff;border-bottom:solid 1px #ffffff;padding-bottom:8px;margin:0 0 10px}

    div#sidebar li li {font-size:0.75em;margin-bottom:4px;background-image:url(listmark.gif);background-repeat:no-repeat;padding-left:16px}

    div#sidebar li li a {text-decoration:none;color:#ffffff}

    ●functions.php
    <?php
    //ウィジェット
    register_sidebar();
    ?>
    を記述してwordpressのフォルダに入れてサイドバーを作成しました。

    ②問題
     自分でも応用すればサイドバー2つ作れるのではと思い、
    functions.phpをもう一つ作成
    index.phpで
    <?php dynamic_sidebar(1);?>
    <?php dynamic_sidebar(2);?>
    で出来るのかな?と思ってやったのですが、見事に失敗しました。

    そのせいで、1つ目のサイドバーがHP記事寄りではなく右側になってしまいました。
    もちろん、div#sidebar ul{margin:0;padding:0}の記述はあります。

    以上ですが目が痛くなる返信ですいませんが、
    よろしくお願いいたします。

    あれ?え~と、サイドバーじゃなくてウィジェットエリアですか?
    サイドバーというと

    sidebar.php を呼び出したりのことだと思うんですけど。
    ウィジェットなら、TwentyTen のfunctionが参考になりませんか?

    kvexさん サイドバーとウィジェットって違うんですね

    本の内容だとウィジェット=サイドバーみたいな記述なんで驚きました。

    ちなみに
    http://www.ablenet.jp/support/aplication/wp_images/theme2-8.gif

    http://www.ablenet.jp/support/aplication/wp_images/theme2-7.gif

    http://www.ablenet.jp/support/aplication/wp_images/theme2-14.jpg

    上記のような形を制作したいのです。

    TwentyTen のfunctionですね、googleで調べてみます。

    こんばんは。この辺りにそのまま載ってますよ。

    登録する際は

    register_sidebars( 2, array('name' => 'Sidebar %d') );

    呼び出す際は

    dynamic_sidebar('Sidebar 1');
    dynamic_sidebar('Sidebar 2');

    サイドバー (sidebar.php) には、ウィジェット以外のものも入れられますし、
    ウィジェットはサイドバー以外の場所にも設置することが出来ます。

    mizubeさん 解答ありがとうございます。
    一応閲覧を試みたのですが残念ながら私の理解が足りずできませんでした。
    また、自己流で↓のやり方で近づく事ができたのですが、コンテンツ、サイドバー2つの間に空白をうまく作る事ができず撃沈です。

    ●functions.php
    <?php
    //ウィジェット
    register_sidebar();
    register_sidebar();
    ?>

    ●index.phpで
    <!..サイドバー1..>
    <div id=”sidebar1″>

      <?php dynamic_sidebar(‘sidebar1’);?>

    </div>

    !..サイドバー2..>
    <div id=”sidebar2″>

      <?php dynamic_sidebar(‘sidebar2’);?>

    </div>

    ●CSSで
    /*サイドバー*/
    div#sidebar1 {width:180px;float:left}

    /*サイドバー2*/
    div#sidebar2 {width:180px;float:left}

    上記やり方でコンテンツ(記事)とサイドバーの空白の作り方又はサイドバー同士の空白の作り方がわかりましたら教えてください。

    また、教えていただいたやり方で試したのですが

    ●functions.php
    <?php
    //ウィジェット
    register_sidebars( 2, array(‘name’ => ‘Sidebar %d’) );
    ?>

    ●index.php
    dynamic_sidebar(‘sidebar1’);
    dynamic_sidebar(‘Sidebar2’);

    ●css
    /*サイドバー*/
    div#sidebar1 {width:180px;float:right}

    /*サイドバー2*/
    div#sidebar2 {width:180px;float:right}

    で行いましたが、できませんでした。私の理解が足りないのは重々承知ですが
    詳しく教えていただけないでしょうか?

    1. まず、 functions.php にてウィジェットエリア(サイドバーと呼ばれていたもの)を登録します。

      register_sidebars( 2, array('name' => 'Widgets %d') );

      これで、サイト管理 > 外観 > ウィジェットのページに、ウィジェットエリアが2つ (Widgets 1 と Widgets 2) 表示されているはずです。

      ウィジェットエリアを同じ体裁かつ連番で登録する場合にはこの 1 行で OK ですが、個別に名前をつけたり体裁を変えたい場合には、個別に登録します。

      register_sidebar( array( 'name' => 'トップページ用') );
      register_sidebar( array( 'name' => 'その他のページ用') );

      この名前は、ウィジェットを設置する際に必要になります。

      こうして登録できたウィジェットエリアには、この時点では何もウィジェットが入っていませんので、一旦、それぞれ適当に追加しておきます。

    2. 次に、任意のテンプレートで、先ほどのウィジェットを設置します。上の例では、登録したウィジェットの名前は「Widgets 1」と「Widgets 2」なので、

      <div id="sidebar1" class="sidebar">
      <?php dynamic_sidebar('Widgets 1'); ?>
      </div>
      
      <div id="sidebar2" class="sidebar">
      <?php dynamic_sidebar('Widgets 2'); ?>
      </div>

      という感じ。 dynamic_sidebar(‘ウィジェットエリアの名前’); というように、呼び出す際には先ほど登録した際のウィジェットエリアの名前が必要になります。

      これでとりあえずウィジェットがページに表示されます。

    3. で、CSSで間隔を空けるには margin プロパティを使います。上の場合、

      .sidebar {
      float: left;
      display: inline; /* IE用 */
      width: 180px;
      margin: 0 10px;
      }

      とすれば左右に10px ずつの間隔を空けられるはずです。
      (#sidebar1 と #sidebar2 の間は 10px + 10px で 20px になります)

      うまく配置したい場合は、コンテンツ部分はコンテンツ部分で幅を決めて float:left; した方がいいかもしれませんね。

    mizubeさん ありがとうございます、勉強になりました。

    難なく綺麗にサイドバー2つ表示させることができました。
    また、「dib#」で記述していましたが、先頭に「.」で十分なんですね。

    今回はサイドバー2つまとめてCSSでデザインしましたが、個々の際はどうするのでしょうか?
    例えば
    index.php
    <div id=”sidebar1″ class=”sidebar”>
    <?php dynamic_sidebar(‘Widgets 1’); ?>
    </div>

    <div id=”sidebar2″ class=”sidebar”>
    <?php dynamic_sidebar(‘Widgets 2’); ?>
    </div>

    でCSSの場合
    .sidebar1 {
    float: left;
    display: inline; /* IE用 */
    width: 200px;
    margin: 0 10px;
    }
    .sidebar2 {
    float: left;
    display: inline; /* IE用 */
    width: 180px;
    margin: 0 10px;
    }
    上記でやりましたが、うまくいきません。
    後、カレンダー表記ですがカレンダーをウィジェットに登録しているのですがwidth180では狭いのか表示できません。
    そこでカレンダーを指定して
    .widget_calendar {width:150}
    にて指定したのですが、効果がありません。
    やはりカレンダーにサイズを合わせるように制作しないといけないのでしょうか?

    class で要素を選択する場合には .sidebar のように、id で要素を選択する場合には #sidebar1 のようにします。これら CSS で要素を選択する記述をセレクタといいます。

    /* クラスセレクタ(.) は、そのクラス属性を持つ要素の見栄えを指定する */
    .sidebar {
    background-color: red;
    }
    
    /* 一意セレクタ(#) は、その ID 属性を持つ要素の見栄えを指定する */
    #sidebar1 {
    background-color: blue;
    }

    プロパティの指定が重複する場合、クラスセレクタよりも一意セレクタのほうが詳細度が高く、優先されます。クラスセレクタの詳細度は 100 、一意セレクタの詳細度は 1000 です。詳細度が同じ場合は、あとに記述したものが適用されます。こういうのをカスケーディングと呼ぶらしいです。

    カレンダーの幅については、値の指定方法が間違っています。HTML の width 属性では単位を入力しませんが、 CSS では単位を指定する必要があります。

    .widget_calendar {
    width: 150px; /* px = ピクセル */
    }

    うまくいかない場合は、セレクタが適切かどうかを確認することと、カレンダーの table 要素の width を指定したり、文字サイズを小さくすることで対応してみてください。

    セレクタや、プロパティの値の指定方法は CSS の基本です。 WordPress のカスタマイズの前に、ざっくりとでも CSS を勉強されたほうがいいと思いますよ。

    トピックの件は解決されたようなので回答はここまでとします。トピックと関係の無い質問については、また新たにトピックを作成してください(同じことで困っている人があとで検索しやすくするために)。

    mizubeさん、大変ありがとうございました。
    自身の勉強力不足を痛感しました。

    hohoho123 さん

    余分なことをなるべく書かないようにしたかっただけですので、
    気を悪くなさらないでくださいね。

    WordPress の使い方に関しては分かる範囲で皆さんとシェア出来ればと思っていますが、
    HTML や CSS についての質問は、自作テーマのカスタマイズの範囲では、
    個々人の責任で頑張るものなので、個人的には回答したくありませんでした。
    最後までお手伝いできなくてごめんなさい。

    そちらはそちらで別にトピックを立てれば、
    ここには親切な方が沢山いらっしゃいますので、
    きっと回答していただけると思いますよ。

    テーマのカスタマイズ、頑張ってください。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「サイドバーをもう1つ増やしたい」には新たに返信することはできません。