Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › フッター上(Body一番下)にスペースを作ることはできますか?
- このトピックには9件の返信、1人の参加者があり、最後に
あやのにより9年、 7ヶ月前に更新されました。
-
投稿者投稿
-
-
2017年2月6日 10:01 AM #50048
あやの
ゲストよろしくお願いいたします
「before-main」のように
フッター上(Body一番下)にスペースを作ることはできますか?三分割されたフッター上に
body横幅100%の自由に使えるエリアがあれば良いな
と思いまして
まだ具体的な用途は考え中ですがよろしくお願いいたします
-
2017年2月6日 11:05 AM #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等で読み込んだデータを整形して目的のブロックに挿入します。とまぁこのように、目的がわからないとその方法も絞り込めず、結局答えにならない場合が多いので、何をするためにどうすればできるかという形式で質問してもらえると助かります。
余程特殊な場合を除いてたいていのことはできますから。 -
2017年2月6日 11:09 AM #50051
Hidekichi
ゲストまるっきりbefore-mainと同じようなことをするなら、
前レスのphpの「ここ」部分に、
<?php get_template_part('after-main'); ?>を入れて、after-main.phpファイルを作成すればよいだけかと思います。
結局、別ファイルで読み込むか直で書くのかの違いだけかと思います。 -
2017年2月6日 12:03 PM #50054
あやの
ゲストうまく行きません _| ̄|○
footer.phpの
</div><!-- /#body -->
と
<!-- footer -->
の間に
<?php get_template_part('after-main'); ?>
ですよね?after-main.phpの設置は親でも子でもいいですよね?
-
2017年2月6日 12:28 PM #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; }こんな感じで書いて、位置を確認してください。
まぁデベロッパーツールで見れば挿入されているかどうかは一目瞭然ですけれども。 -
2017年2月6日 12:29 PM #50056
あやの
ゲストスミマセン
after-main.phpの内容がダメみたいでした
ごめんなさいここにテキストウィジェットを設置できるのでしょうか?
よろしければアドバイスください
m(_ _)m -
2017年2月6日 12:36 PM #50057
あやの
ゲストHidekichi様
確かに
試しに書いた「ああああ」がメイン横のトップにいました!
スタイルが必要なんですね取り急ぎ
有難うございます -
2017年2月6日 1:08 PM #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のままでサイドバーに入れたいウィジェットを設置するだけですから。
フッター付近というのもあり、移動なり複製時にチラつくのも表示されずにわかりません。またメンテナンスもこっちのが楽だと思いますけどね。結局、作ったエリアをどう使うかで色々方法が変わる、これに尽きると思います。
-
2017年2月6日 1:35 PM #50059
Hidekichi
ゲストちなみに他に影響が出るかも知れませんが、
.after-main { clear: both; }の他に、
#body::after { content: ""; display: table; clear: both; }このような書き方もできます。
-
2017年2月6日 1:36 PM #50060
あやの
ゲストなんども有難うございます!
うまくいかない
と思ったら
ウィジェットでもスタイルが必要なんですね
とりあえずコピペしたら表示できました!!バージョンアップでフッターはあまり更新されない?と思うので
当面は子テーマにコピーして使いますトップページ専用で
after-mainの利用方法をこれからじっくりと検討してみます
Hidekichi様、有難うございました
-
-
投稿者投稿
- トピック「フッター上(Body一番下)にスペースを作ることはできますか?」には新しい返信をつけることはできません。