子テーマにfunctions.phpを複製したら、レイアウト等が崩れてしまう件
-
子テーマのfunctions.phpを開き、全て中身を削除してください。
そして、このコードを貼り付けてください。<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') ); }
ご回答、ありがとうございます。
(すでに子テーマのfunctions.phpを削除していたため、再度、親テーマから子テーマに複製し)ご教示いただいたコードを貼りつけてみました。
ヘッダーの写真は元のサイズに戻りましたが、文字部分が小さくなり。そのかわり、両脇に余白(padding?)が入るレイアウトになってしまいました。
お手数ですが、もう少しお付き合い頂けると、とても助かったりします〜
子テーマのStyle.cssには何も記載されていないので、親テーマを編集したのではないですか?
https://tsurumaki-office.com/wp-content/themes/twentyseventeen-child/style.cssちなみに、(ユーザー名とパスワードを入力してログインする)いつものダッシュボードも、同様に、文字が小さく中央にレイアウトされ、左右の余白が、グンと広くなっています。なにかヒントになりますでしょうか。
残るは、親テーマの追加cssとか子テーマの追加cssとかですね。
.site-description { color: #666;/*文字の色*/ font-size: 25px;/*文字の大きさ*/ padding-top:7px;/*上部パディングの調整*/ } /* 記事&サイドバーの広さ*/ @media screen and (min-width: 48em) { .wrap { /* 全体の横幅 */ max-width: 1000px; /* 余白(左) */ padding-left: 10px; /* 余白(右) */ padding-right: 10px; } /* 記事部分の横幅 */ .has-sidebar:not(.error404) #primary { float: left; width: 66%; } /* サイドバーの横幅 */ .has-sidebar #secondary { float: right; padding-top: 0; width: 29%; } } /*本文のフォントサイズの変更*/ body{ font-size: 18px } /*「好きの働き。」ロゴの下にマージンを作成する*/ .entry-content a img{ margin-bottom:25px; } /*「好きの働き。」の文字を消す*/ .page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title { text-indent: 100%; white-space: nowrap; overflow: hidden; } /*「好きの働き。」をレスポンシブに*/ @media (max-width: 650px) { table td{ display: block; padding: 0.6em; text-align: center; } } /*YoastCEOの「パンくずリスト」の調整。header.phpの下部の記述と対応*/ #breadcrumbs { text-align: center; color: black; font-size: 90%; } /*ウィジットのイラストを下げる*/ img.image.wp-image-12480.attachment-full.size-full { margin-bottom: -10px; } /*iPhoneのタイトルの表示*/ @media (max-width: 650px) { .site-title{ font-size: 23px } } /*iPhoneのキャッチフレーズの表示*/ @media (max-width: 650px) { .site-description { font-size: 21px } } </style>
子テーマの「追加CSS」をクリアしてみました。
いちおう親テーマの「追加CSS」も確認しようと思ったのですが、ダッシュボードのレイアウトの不都合のせいか、テーマ変更 > 親の「有効」のボタンが表示されない状況です。functions.phpの記述を下記に変更したらどうでしょうか?
<?php function theme_enqueue_styles() { wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css', array(), '2.0' ); wp_enqueue_style( 'twentyseventeen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentyseventeen-style' ), '2.0' ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
以前子テーマで
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), '2.0' );
のようなことをすると管理画面の一部がおかしくなった記憶があります。このフォーラムに何回も出てきてますが
問題解決のためのチェックリスト
確認してください。とりあえず、私達から見られるWebページの領域では、カスタムCSSは表示&反映されていません。
別のブラウザで表示してみて現状で問題がなければそれでOKかもしれません。管理画面についても同様に、別のブラウザで見れば正常に見られるかもしれません。
要はブラウザに残っているキャッシュがいたずらをしているのかもしれないということです。
RICKさま ありがとうございます。
Safari、Firefoxで確認してみました。こちらは、うまく表示されていました。
現状利用しているChromeは、修正後、ちくいちキャッシュをクリアしていたのですけれど、これが、だめなんですよー。npsslさま お手数をおかけしました。ありがとうございました。
おかげさまで、子テーマでのfunctions.phpの扱いは要注意、ということが分かりました。ご教示いただいた同ファイルのコードについては、おいおい、学んでいきたいと存じます。
子テーマに親テーマのファンクションを丸ごとコピーして持ってくるなんて記事をどこで読んだのですか?
https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E私がテーマを編集してからGoogle Chromeのキャッシュを削除する際は、以下のようにしています。
- キャッシュを削除したいページで
F12
を押す - 更新ボタンを長押し or 右クリック
- キャッシュの削除とハード再読込をクリック
手順1終了時にはDeveloper Toolが起動します。
気になる部分にどのようなスタイルが適用されているのか等が
確認できるのでテーマをいじる際には結構重宝しています。ちなみに気になる部分を右クリック→検証でも同様のことができます。
- キャッシュを削除したいページで
- トピック「子テーマにfunctions.phpを複製したら、レイアウト等が崩れてしまう件」には新たに返信することはできません。