Elementor全幅コンテンツでLightningのヘッダーとフッターを表示させる
Bellwood-LabLightning g3でElementorの全幅テンプレートを指定すると，ヘッダーとフッターが表示されない現象にぶつかり難儀します。g2ではこのようなことは無かったのですが，g3では仕様上このような表示になってしまうようです。それでも全幅表示を行いたいので，あれこれ表示の調整を行って，なんとか見られる状態まで設定することができました。備忘録的内容ですが，お困りの方がいらっしゃいましたら，参考になれば幸いです。
ヘッダー・フッター表示対策
Ligntningのヘッダーとフッターをショートコードで呼び出して，ページの上下に表示させるようにしました。
ショートコードの作成
子テーマのfunctions.phpにショートコードを記述します。
function show_myheader_func() {
ob_start();
get_template_part('_g3/template-parts/site-header');
return ob_get_clean();
}
add_shortcode('show_myheader', 'show_myheader_func');
function show_myfooter_func() {
ob_start();
get_template_part('_g3/template-parts/site-footer');
return ob_get_clean();
}
add_shortcode('show_myfooter', 'show_myfooter_func');
Lightningのヘッダーはshow_myheader，フッターはshow_myfooterというショートコード名で呼び出せるようになります。
なお子テーマでヘッダーとフッターをカスタマイズしていますので，呼び出すphpプログラムのパスが3行目と10行目のようになっています。カスタマイズをしていない場合は親テーマの../lightning/_g3/template-parts/以下を参照してください。
ハンバーガーメニューの準備
上で作成したショートコードでヘッダーを表示させても，ハンバーガーメニューは表示されません。ハンバーガーメニューを表示させるためのHTMLコードを準備しておきます。このコードは，ヘッダーが正常に表示されているページから借用したものです。
<div id="vk-mobile-nav-menu-btn" class="vk-mobile-nav-menu-btn position-right">MENU</div>
<div class="vk-mobile-nav vk-mobile-nav-right-in" id="vk-mobile-nav">
<nav class="vk-mobile-nav-menu-outer" role="navigation"><ul id="menu-menu-2" class="vk-menu-acc menu vk-menu-acc-active"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-632"><a href="https://bellwood-lab.jp/?post_type=hardware">Hardware</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-633"><a href="https://bellwood-lab.jp/?post_type=software">Software</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-866"><a href="https://bellwood-lab.jp/?post_type=memorandum">Memorandum</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1798"><a href="https://bellwood-lab.jp/gallery">Gallery</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-740"><a rel="privacy-policy" href="https://bellwood-lab.jp/about-lost-world-of-mac">About</a></li>
<li class="menu-item menu-item-type-gs_sim menu-item-object-gs_sim menu-item-2808"><a href="#" class="nturl notranslate ja Japanese single-language flag" title="Japanese" data-lang="Japanese"><span class="flag size24"></span></a></li>
<li class="menu-item menu-item-type-gs_sim menu-item-object-gs_sim menu-item-2809"><a href="#" class="nturl notranslate en united-states single-language flag" title="English" data-lang="English"><span class="flag size24"></span></a></li>
</ul>
</nav>
</div>
Elementorでヘッダーとフッターを設置する
ショーコードはショートコードwidgetへ，HTMLコードはHTML widgetに記述します。
Elementorのエディタ内ではCSSが正しく反映されないため表示が崩れますが，プレビューすればきちんと表示されているはずです。
ハンバーガーメニューは，直接HTMLで表示させているのでExUnitでの設定に関わらず，全てのデバイス解像度で表示されます。
Elementor Proを使用している場合は，ハンバーガーメニューのHTMLをPCで非表示に設定するとよいでしょう。Elementorの無償版ではCSSのmedia queryを書く必要があります。PCでハンバーガーメニューが表示されても気にならない場合は，特に調整不要です。
この時点でプレビューを確認して，CSSで調整が必要な部分が見つかるかもしれませんので，適宜対策します。
Elementorの非全幅コンテンツ表示を修正する
アーカイブページ等phpで自動生成されるページを全幅で表示させたい場合はCSSで対策します。以下はCSSの例です。
コンテンツの幅指定
@media (min-width: 1200px) {
.site-body-container.container {
max-width: 95vw !important;
}
}
パンくずリストの位置調整
@media (min-width: 1200px){
.breadcrumb .container {
max-width: 90vw !important;
}
}
2カラムでのウィジェット群（右サイド）表示位置調整
@media (min-width: 1200px) {
.sub-section.sub-section--col--two {
float:left;
margin-left:5%;
}
}
以上で違和感を感じない程度まで表示を調整することができました。
