実現したいこと
・文字サイズを変更する「大」「中」「小」ボタンを作り、
サイト全体(ヘッダー・ボディ・フッターすべての文字)を対象に指定サイズに連動させたい
・デフォルトは中サイズ
・選択中のボタンは配色
前提
・Wordpressのテーマ「ZOOMY」を使用。
以下いくつか記事やChatGPTを使用して試してみましたが、できませんでした。
発生している問題・エラーメッセージ
以下箇所の文字が、ボタンクリックに連動してサイズ変更されない
・固定ページにて作成したタイトル名、本文
・フッター
・テーマのデフォルト機能の一部文字
該当のソースコード
HTML
1<div class="font-size-control"> 2 <button id="font-large">大</button> 3 <button id="font-medium">中</button> 4 <button id="font-small">小</button> 5</div>
CSS(style.cssに記載)
1.active { 2 background-color: lightgray; 3}
Javascript(function.phpに記載)
1function custom_scripts() { 2?> 3 <script> 4 jQuery(document).ready(function($) { 5 $("#font-small").click(function() { 6 $("body").css("font-size", "20px"); 7 $(this).addClass("active"); 8 $("#font-medium, #font-large").removeClass("active"); 9 }); 10 $("#font-medium").click(function() { 11 $("body").css("font-size", "26px"); 12 $(this).addClass("active"); 13 $("#font-small, #font-large").removeClass("active"); 14 }); 15 $("#font-large").click(function() { 16 $("body").css("font-size", "32px"); 17 $(this).addClass("active"); 18 $("#font-small, #font-medium").removeClass("active"); 19 }); 20 }); 21 </script> 22<?php 23} 24add_action( 'wp_footer', 'custom_scripts' ); 25
試したこと
■パターンA
上記Javascriptコード内の"body"を、body内のID名(l-header, l-main, l-footer)に変更
■パターンB
①jQuery Text Resizer、jQuery Cookieをテーマフォルダにコピー
②header.phpに以下コード埋め込み
PHP
1<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.cookie.js"></script> 2<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.textresizer.js"></script> 3<script type="text/javascript"> 4jQuery(document).ready( function() { 5 jQuery( "#textsize a" ).textresizer({ 6 target: "#content", 7 // type: "fontSize", 8 sizes: [ "20px", "16px", "12px" ] 9 }); 10}); 11</script>
③指定箇所に以下HTMLを埋め込み
HTML
1<div id="textsize"> 2<a href="#">大</a> 3<a href="#">中</a> 4<a href="#">小</a> 5</div>
補足情報(FW/ツールのバージョンなど)
現在のWordpressバージョン: 6.1.1

バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/02/06 11:43
2023/02/06 12:32