フッター上(Body一番下)にスペースを作ることはできますか?

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › フッター上(Body一番下)にスペースを作ることはできますか?

  • このトピックには9件の返信、1人の参加者があり、最後にあやのにより9年、 7ヶ月前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #50048
      あやの
      ゲスト

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

      「before-main」のように
      フッター上(Body一番下)にスペースを作ることはできますか?

      三分割されたフッター上に
      body横幅100%の自由に使えるエリアがあれば良いな
      と思いまして
      まだ具体的な用途は考え中ですが

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

    • #50050
      Hidekichi
      ゲスト

      フッター内上部ではなく、フッター上部に何かしら入れることはできます。
      そこに何を入れるかが最重要で、それによって手法を変える必要があります。

      例えばウィジェットを入れるのであれば、それを別途どこかファーストビューで見える範囲外(投稿記事下とかサイドバーとか)に入れておいて、jQueryで場所を確保した上でそのブロックに移動させます。

      ショートコードならテキストウィジェットで行けるかと思います。

      何かしらのスクリプトでの表示を入れるなら予めjQueryで場所を確保させた後、必要な記述をそのブロック内に挿入しスクリプトを動作させます。多くの場合、document.readyで準備をし、window.onloadで実行すればいけるかと。もしくは画面内にその要素が入った場合に実行などです。

      どうしてもphpを介する必要がある場合は、footer.phpの

      </div><!-- /#body -->
      ここ <-----------------------------------
            <!-- footer -->
            <footer itemscope itemtype="http://schema.org/WPFooter">

      にhtmlとphpの処理を書きます。親テーマをいじった場合アップデートのたびに手を入れる必要があるのを忘れないでください。

      たいていこれらは、ajaxで何とかなります。
      ajaxをする場合は、子テーマlibフォルダなどに出力用のphpを書き、jQuery等で読み込んだデータを整形して目的のブロックに挿入します。

      とまぁこのように、目的がわからないとその方法も絞り込めず、結局答えにならない場合が多いので、何をするためにどうすればできるかという形式で質問してもらえると助かります。
      余程特殊な場合を除いてたいていのことはできますから。

    • #50051
      Hidekichi
      ゲスト

      まるっきりbefore-mainと同じようなことをするなら、

      前レスのphpの「ここ」部分に、

      <?php get_template_part('after-main'); ?>

      を入れて、after-main.phpファイルを作成すればよいだけかと思います。
      結局、別ファイルで読み込むか直で書くのかの違いだけかと思います。

    • #50054
      あやの
      ゲスト

      うまく行きません _| ̄|○

      footer.phpの
      </div><!-- /#body -->
      と
      <!-- footer -->
      の間に
      <?php get_template_part('after-main'); ?>
      ですよね?

      after-main.phpの設置は親でも子でもいいですよね?

    • #50055
      Hidekichi
      ゲスト

      何がうまく行かないかがわかりませんが、やり方はあってます。記述もそのままであれば問題ないはずです。
      親・子テーマどちらでも行けると思います。

      もしかすると、スタイルとかなんにもされていないのであれば、simplicityの#body-in内にある#mainにしろ、#sidebarにしろfloatされているので、#body-inおよび、#bodyには高さがありません。そのためafter-main.phpに書かれている中身が#body上部あたりまで移動します。

      仮に、after-main.phpの中に、<div class="after-main">test</div>というのが書いてあるとすれば、

      .after-main {
        clear: both;
      }

      が必要です。これはjQueryでやっても同じことです。
      わかりやすくするために、セレクタは任意でいいですが上記スタイルで、

      .after-main {
        clear: both;
        /*以下テスト用*/
        font-size: 3em;
        color: red;
        border: 1px solid;
      }

      こんな感じで書いて、位置を確認してください。
      まぁデベロッパーツールで見れば挿入されているかどうかは一目瞭然ですけれども。

    • #50056
      あやの
      ゲスト

      スミマセン
      after-main.phpの内容がダメみたいでした
      ごめんなさい

      ここにテキストウィジェットを設置できるのでしょうか?
      よろしければアドバイスください
      m(_ _)m

    • #50057
      あやの
      ゲスト

      Hidekichi様

      確かに
      試しに書いた「ああああ」がメイン横のトップにいました!
      スタイルが必要なんですね

      取り急ぎ
      有難うございます

    • #50058
      Hidekichi
      ゲスト

      after-main.phpの中に、

      <div id="after-main" class="after-main">
        <?php dynamic_sidebar('after-main'); ?>
      </div>

      と入れておいて、子テーマfunctions.phpに、

      register_sidebars(1,
        array(
        'name'=>'after-main',
        'id' => 'after-main',
        'description' => 'after-mainをカスタマイズするためのウィジットエリアです。',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<div class="widget_title">',
        'after_title' => '</div>',
      ));

      こんな感じで書けば行けるかと思います。テキストウィジェットに、
      <div style="font-size: 3em; color:red;">テスト</div>
      こんな感じに書いたとして、上記が動けば、

      <div id="after-main" class="after-main">
        <div id="text-10" class="widget widget_text">
          <div class="textwidget">
            <div style="font-size: 3em; color:red;">テスト</div>
          </div>
        </div>
      </div>

      こんな感じに出力されると思います。
      after-mainばかりでわかりにくいですが、register_sidebarsのidとdynamic_sidebarのカッコ内が一致していれば関係性が保たれるので他のウィジェットも使えるはずです。試してませんが。

      このように色々なファイルに書くのはとても面倒くさいので、僕ならjQueryでサイドバーに任意のウィジェットを設置して移動させるか複製します。それならjavascript.jsだけで済みますし、従来のSimplicityのままでサイドバーに入れたいウィジェットを設置するだけですから。
      フッター付近というのもあり、移動なり複製時にチラつくのも表示されずにわかりません。またメンテナンスもこっちのが楽だと思いますけどね。

      結局、作ったエリアをどう使うかで色々方法が変わる、これに尽きると思います。

    • #50059
      Hidekichi
      ゲスト

      ちなみに他に影響が出るかも知れませんが、

      .after-main {
        clear: both;
      }

      の他に、

      #body::after {
          content: "";
          display: table;
          clear: both;
      }

      このような書き方もできます。

    • #50060
      あやの
      ゲスト

      なんども有難うございます!

      うまくいかない
      と思ったら
      ウィジェットでもスタイルが必要なんですね
      とりあえずコピペしたら表示できました!!

      バージョンアップでフッターはあまり更新されない?と思うので
      当面は子テーマにコピーして使います

      トップページ専用で
      after-mainの利用方法をこれからじっくりと検討してみます
      Hidekichi様、有難うございました

9件の返信スレッドを表示中
  • トピック「フッター上(Body一番下)にスペースを作ることはできますか?」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)