jQuery「Slider Pro」を使ってヘッダーに横幅100%のスライダーを設置したい

ありがとうございます

「before-main.php」を利用して
ヘッダー下（メインカラムの上）にスライダーを設置した場合
横幅100%で表示することは無理でしょうか？

できれば子テーマで
スライダーを入れたいので

「header-insert.php」を利用した場合
ヘッダーのトップに横幅100%で配置されます

トップではなく
サイトタイトルの下に表示できるのでしょうか？

只今作成中のサイトで「Master Slider – Responsive Touch Slider」を使用しています。

「Master Slider」は、無料で8つのタイプから選べるスライダープラグインです。その内2つがフルワイドタイプかつ、ショートコードとPHP functionでの設置に対応しています。

私はPHP functionを「before-main.php」に貼り使用しており、グローバルメニュー下に全幅100％で表示しています。

全幅100％とはウィンドウ幅ですか？

「before-main.php」に貼ると
メインカラム＋サイドバー幅が限度のような･･･

before-main.phpに書くと#body-inの中に入るのでメインカラム＋サイドバー幅になります。
header-insert.phpに書くと、body直下に入るので#headerより上に入ります。

目的の部分に要素を入れるためにはパッと思いつくので2つ方法があり、1つはjQueryで#bodyの手前か#naviの後に何かしらブロックを挿入し、そこにプラグインのセレクタごと移動させると言うのが1つ、もう一つは、before-mainに書いておいて、cssで動かすというのもいけます。

<div class="before-main">test</div>というのがbefore-main.phpに書いてあるとして、

.before-main {
    position: relative;
    width: calc(100vw - 16px);
    margin-left: -49.5vw;
    left: 50%;
    box-sizing: border-box;
}

firefoxではこれぐらいでした。width: 100vwはスクロールバーの幅も含むなのでcalcでおおよそのサイズを引いておき、それが要素の幅になります。
left: 50%で左端を真ん中に持ってきて、margin-left: -49.5vwでおおよそ半分をマイナスすることで要素を画面内に入れます。ここらは若干微調整が必要でしょう。

またvwを正しく表示できないブラウザではうまく表示できないでしょう。アップデートされたのでイケるかも知れませんがsafariとか、vwあたりにバグがあったりしました。IEは端から知りません。

jQueryで要素を挿入するのは、

(function($){
	$(function(){
		$("#body").before("<div class='test'>");
	});
})(jQuery);

こんな感じにすれば#bodyの手前に.testが挿入されます。スライダーを.test内に入れればそれでokです。この場合の.testは画面幅(スタイルによりけりですがいわゆる基本100%)です。

スライダーではなく、見た目の話ですが、

サンプル: Simplicity メニュー下に画像挿入 | codepen

こんな感じになるかと思うので、あまりデザイン的には良くないかと思うんですけどそれでもよければ進めてください。

全幅100％とはウィンドウ幅ですか？

「before-main.php」に貼ると
メインカラム＋サイドバー幅が限度のような･･･

通常は仰る通りです。
しかし、「Master Slider」の’Fullwidth Slider’と’Fullwidth Slider with Thumbnails’の2つのテンプレートタイプは違います。

この2つのタイプは、サイト幅に関係なくウィンドウ幅いっぱいに表示されます。
その名の通りフルワイド。
jQueryやCSSなどで調整する必要は一切ありません。

利用できる8つのテンプレートタイプのデモが用意されているので、どのように表示されるか確認されてはどうでしょうか。

「Master Slider」無料版デモ

尚、スライダーの高さは、いずれのテンプレートタイプでも任意の高さにできます。

ちなみにAkiraさんオススメのスライダーのように初めから画面幅いっぱいに設置できるものがあるのであればそれを使えばいいですが、仮にそういう機能がないプラグイン等のスライダーでも100%表示はすることができます。

レスポンシブに対応しているものなら、その外にある親のサイズを調整するだけなのでより簡単です。
レスポンシブ対応でない場合でも、Akiraさんのスライダーのように、タグ内に直でサイズを指定すればもちろんできます。このタイプは後で修正するのが面倒ですけどね。なので最初から機能として持っているもののほうが便利です。

一方ではできているのに片一方ではできないというのは余程特殊な場合を除いてありません。

2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ | コリス
ここのしたの方にある「2017年、WebデザインのUIにおけるトレンド」を読んでみてください。スライダーが悪いというわけではありませんが、もう既にあまり使われなくなっている傾向にあります。
なぜ使われないか？はとても簡単です。わざわざスライドさせて記事を探すということすらが面倒ということで、そこからのリンク回遊があまり高くないということなんでしょう。
またスライダーは画面上部にあればすぐにスクロールされて画面の範囲外に押しやられてしまいます。ここをどうするかはとても難しい課題です。なんせ見に来ている人は記事の内容を見たいわけでスライダーのリンクは2の次3の次なんですから。

しかもスライダーは本来場所の節約に一役かっていたはずですが、逆にでかくて邪魔という場合もあります。

しかし効果的に使えばその全てではありません。あわせて、「2017年、Web制作業界全体の流れ」を読んでみてください。モバイルファーストからモバイルオンリーとかという恐ろしいキーワードがあがっています。
確かにモバイル端末でwebを見るのが多くなっているというのは否めません。またこの記事が100%そのまんまということは無いにしても、遠からずそのような雰囲気にはなるでしょう。

m$のsurfaceのように解像度デカすぎというようなモバイル端末もあれば、スマホのようなものもあり、タブレットとスマホの中間のファブレットというのもあります。デザイン的には大きな画面のほうが圧倒的にデザインしやすいですが、小さい画面から大きな画面まで対応する必要があるというのとタッチデバイスに対応する必要があるという事で、クリック一つで何でもできたのは過去の話になりそうです。

タッチデバイスはスワイプなどもあり、スライダーは逆に上手く使えば便利に利用できる可能性もあります。しかしAMPなどの登場もあり、できるだけ簡素に制限された中で素早く簡単に情報を得られるというのが求められているようにも思います。
箇条書きや、カードなどの方が、全体を一挙に見回した後選択できるという点で簡単便利となっているようにも思います。しかしそれはデザインがしにくいとかスクロールが多く発生するということにイコールになったりもします。それはスライダーも同様なので、何が正解でどうすればよいのかをみんな探り探りという感じなわけです。

まぁ僕が感じるに、タッチデバイスの登場からしばらく時間が経過して、PCすら触れない(操作がわからない・スマホは使える。ただし文字入力とタップ操作ぐらいで機能はアプリ任せ)という若者が登場したという事実から、とにかくシンプルにしないと面倒臭がられるという傾向があるのは事実です。

元々簡単にクリック、右クリックだけで済んだものを更にスワイプやタップで直感的に操作できるようにより簡単にしたわけですから、言葉は悪いですがアホでもすぐ理解できるようにする必要があるというのは否めません。
もしくは操作がちょっと複雑になるぐらいですぐに飽きられるという感じです。

そこらを踏まえて上手にスライダーを利用できるように色々と考えてみてください。