CG
(@du-bist-der-lenz)
スクロールしてもグローバル・ナビゲーション・メニューを上部に常においておくカスタムは可能です。そのような手段をどうしたいか次第です。
できるのです！
スマホでも メニューだけをおいておくには
ワードプレス twenty seventeenの場合
どうすればいいのですか？
CG
(@du-bist-der-lenz)
「カスタマイズには無いカスタム編集」と言えない。グローバル・ナビゲーションの記述がある、WordPressのテーマであれば、どれでもできることです。Twenty Seventeenでの問題は有りません。答えは出ているようなもので、意欲を掻き立てるほども有りません。繰り返しになりますので、確認は最後にしたいのですが、どういう手段で施工したいのか、可能なのか問うてます。最も簡易なのは、これでいいでしょう。
手段とは、ｃｓｓのことでしょうか？
子テーマでテーマの編集から以外しかカスタム方法はわかりません。。
それ以外で難しすぎるのは おそらく無理っぽいです。
CG
(@du-bist-der-lenz)
子テーマで、テーマの編集は使わないということでしょうか。スタイルシートが理解できているようなので、固定にするだけなら、基本なので言わずもがなですが、PC時のスタイルシートを参考にしましょう。
すいません いつも説明下手すぎて・・・
テーマの編集の仕方もわかりません。
それ以外に編集するモノもあるかどうかも分かります。
スタイルシートもやったことないです。
すごく基本的なこと事体も分かっておりません。
スマホでの 「三メニューボタンが流れないようにしたい」の
質問の説明文もあっていないような・・・ 間違っているような気がします。
CG
(@du-bist-der-lenz)
CSSの固定表示ならposition: fixed;ですね。モバイル時のハンバーガーメニューボタンを固定したいということだと、解釈してモデルページを用意したのですが、違いましたか。テーマの編集をするのでもなく、スタイルシートだけで済ませることなら、子テーマの必要も有りませんよ。管理の面倒が増えるばかりです。わたしはスタイルシートは、Twenty Seventeen だったら、投稿の日付を変更日に変更するなど、表示の追加が必要なことだけです。
こんにちは
スタイルシートもやったことないです。
ご希望の機能を実現するには、スタイルシートおよび JavaScript を記述する必要があります。
「スタイルシートもやったことない」となると少しハードルが高いかもしれません。
ご希望の機能を実装しているテーマやプラグインを探すといいかと思います。
いちおう、それっぽくなる例を上げておきます。
テーマの style.css またはカスタマイズの [追加 CSS] などに、
@media screen and (max-width: 48em) {
.site-navigation-fixed.navigation-top {
bottom: auto;
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
z-index: 7;
}
.admin-bar .site-navigation-fixed.navigation-top {
top: 0;
}
.menu-main-container {
max-height: 90vh;
overflow: hidden auto;
}
}
テーマの functions.php に、
function my_enqueue_scripts() {
$script = <<<SCRIPT
(function($) {
var body = $('body'),
navigation = body.find('.navigation-top'),
customHeader = body.find('.custom-header'),
navigationOuterHeight = navigation.outerHeight(),
headerOffset = (body.hasClass('has-header-image')) ? customHeader.innerHeight() - navigationOuterHeight : 0;
$(window).on('scroll', function() {
if ($(window).scrollTop() >= headerOffset) {
navigation.addClass('site-navigation-fixed');
} else {
navigation.removeClass('site-navigation-fixed');
}
});
})(jQuery);
SCRIPT;
wp_add_inline_script( 'twentyseventeen-global', $script );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts', 11 );
ありがとうございました。
できました！！
ishitakaさん gatolabo さん からのアドバイスで、簡単にすんなりと解決しました。
CGさんにもいろいろとアドバイスをいつもいただきまして恐縮です。
@media screen and (max-width: 48em) {
.site-navigation-fixed.navigation-top {
bottom: auto;
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
z-index: 7;
}
を追加プラグインSimple Custom CSSに にコピペして追加するだけでできました
すっきりです。ありがとうございました
CG
(@du-bist-der-lenz)
CSS追加するには、カスタマイズの「追加CSS」で十分ですよ。「カスタマイズ」はないことで、使用していくことを非難はしませんが。考え方はそれぞれですから。プラグイン「Simple Custom CSS」を無効化した時、どう変わるでしょう。gatolaboさんの説明にも示唆が含まれていましたが、モバイルは画面が狭いのと、スマホでは下部にメニューボタンを廃するのが操作性はよくないでしょうか。Twenty Seventeenでは、モバイル表示も支障はないでしょうが、店の予約などの用途を目的としたら、スマホ操作性の良いテーマ作りが必要でしょう。親テーマの仕様が変わった時に、子テーマとズレが生じる場合がありますので、それはそれで大変ですよ。そして、ishitakaさんのおすすめにもあるよう、「希望の機能を実装しているテーマやプラグインを探す」のが、後々メンテナンスに振り回されないかも。Twenty Seventeenの子テーマあたりから、試すことを勧めます。
CGさん
プラグイン「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」と
カスタマイズの「追加CSS」は基本的に 一緒のように追加できると
考えてもいいのでしょうか？
それなら
プラグイン「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」に追加したコードを
コピペして、カスタマイズの「追加CSS」に追加するだけでもOKなのかな？
CG
(@du-bist-der-lenz)
プラグイン「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」に追加したコードをコピペして、カスタマイズの「追加CSS」に追加する、と重複して見分けつかないでしょう。プラグイン「Simple Custom CSS」を無効化した時、どう変わるでしょう。それで、プラグインで行うことと、データベースに保存させることの違いが理解できる、、、、可能性に期待しています。
