- このトピックには9件の返信、2人の参加者があり、最後に
により2年、 2ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】25.0.2
【お使いの Snow Monkey Blocks のバージョン】 20.1.2
【お使いの Snow Monkey Editor のバージョン】9.3.0
【お使いのブラウザ】Chrome
【当該サイトのURL】テストサイト### 実現したいこと
いつも大変お世話になっております。
お忙しいところ、技術的な問題で申し訳ございませんが、iPadでもPCと同じ表示にしたいため、Snow monkeyテーマ更新に影響がなくviewportを置き換える方法を教えていただければ幸いです。my Snow monkeyもセットしています。
試したこと
以下サイトを参考にjavascriptの設置を試みましたがうまくいきませんでした。Who liked: No userviewport を書き換えるという発想がなく、この部分には特に専用のフックなどは用意されていないため、やるなら HTML を書き換えるフックで書き換える形になるかなと思います。
とりあえず下記で既存の viewport 用メタタグは消えるかと思います。
add_filter( 'snow_monkey_template_part_render_template-parts/common/head', function( $html ) { $html = preg_replace( '|<meta name="viewport"[^>]+?>|s', '', $html ); return $html; } );あとは js でやっても良いし、ユーザーエージェントで判定させるなら PHP でもできると思うので、PHP で追加しても良いのかなと思います。
Who liked:ご返信が遅くなりまして申し訳ございません！
ご教授いただきましてありがとうございます。
早速 viewport 用のメタタグを消すことができました。取り急ぎfunction add_meta_in_head() 〜でviewportの書き換えをしようとしてみましたが、
教えていただいたviewport 用メタタグを消すコードが干渉して、
<meta name=”viewport”〜が消えてしまいます・・・初歩的な質問で申し訳ございませんが、
・タブレットの場合だけ：<meta name=”viewport” content=”width=1280″>
・それ以外の場合は置き換えない
といったことは可能でしょうか？Who liked: No user取り急ぎfunction add_meta_in_head() 〜でviewportの書き換えをしようとしてみましたが、
教えていただいたviewport 用メタタグを消すコードが干渉して、
<meta name=”viewport”〜が消えてしまいます・・・メタタグを消す関数とメタタグを追加する関数を別々にせずに、同じ関数内で処理すれば大丈夫なのではないかと思います。
初歩的な質問で申し訳ございませんが、
・タブレットの場合だけ：<meta name=”viewport” content=”width=1280″>
・それ以外の場合は置き換えない
といったことは可能でしょうか？「タブレットの場合だけ」をどうやって判定するのかちょっと僕もわからないのですが、コード的には下記のような感じになると思います。
add_filter( 'snow_monkey_template_part_render_template-parts/common/head', function( $html ) { // 既存のメタタグを削除 $html = preg_replace( '|<meta name="viewport"[^>]+?>|s', '', $html ); if ( タブレットの場合 ) { // メタタグを追加 $html .= '<meta name="viewport" ...省略...>'; } else { // それ以外 $html .= '<meta name="viewport" ...省略...>'; } return $html; } );Who liked:ご教授いただきましてありがとうございます。
私の知識が足りず、どうしても上手くいきません・・・
お忙しいところ質問を重ねまして申し訳ございません。
タブレットの場合ではなく、「スマホの場合か、ウィンドウサイズ680以上の場合 」で設定する場合なら、どのようなコードになりますか？add_filter(
‘snow_monkey_template_part_render_template-parts/common/head’,
function( $html ) {
// 既存のメタタグを削除
$html = preg_replace( ‘|<meta name=”viewport”[^>]+?>|s’, ”, $html );if ( スマホの場合か、ウィンドウサイズ680以下の場合に限り ) {
// メタタグを追加
$html .= ‘<meta name=”viewport” …省略…>’;
} else {
// それ以外
$html .= ‘<meta name=”viewport” …省略…>’;
}return $html;
}
);Who liked: No user以下の箇所、誤記でした、失礼いたしました。
＞＞タブレットの場合ではなく、「スマホの場合か、ウィンドウサイズ680以上の場合 」で
訂正：
「スマホの場合（ウィンドウサイズ680以下の場合 ）」と、「それ以外」で、viewportを分けたいです。Who liked: No userお世話になります、お忙しいところサポートいただきまして誠にありがとうございます。
以下のjsを読み込むことで叶いました！
以下をmy Snowmonkeyに記述して読み込んでいますが、もう一つアニメーション系のjsを読み込みたく、jsを複数読み込むためにはどう記述しますか？
add_action('wp_enqueue_scripts', 'msm_enqueue_style_script'); function msm_enqueue_style_script() { /* js読み込み */ wp_enqueue_script( 'msm_scripts', MY_SNOW_MONKEY_URL . '/js/viewport.js', ['jquery'], filemtime(MY_SNOW_MONKEY_PATH . '/js/viewport.js'), true ); }Who liked: No user以下をmy Snowmonkeyに記述して読み込んでいますが、もう一つアニメーション系のjsを読み込みたく、jsを複数読み込むためにはどう記述しますか？
WordPress で js ファイルを読み込むためには
wp_enqueue_script()を使用します。今は
msm_enqueue_style_script()の中でwp_enqueue_script()を使いmsm_scriptsという識別名でMY_SNOW_MONKEY_URL . '/js/viewport.js'を読み込んでいますよね？ なのでそれをコピペして、識別名を適当なものに書き換え、読みたいファイルのパスを記述すれば良いです。詳しくは↑のリンクに詳細が書いてあるので確認してみてください！Who liked:
- トピック「iPadでもPCと同じ表示にする方法」には新しい返信をつけることはできません。