サポート » テーマ » 子テーマにfunctions.phpを複製したら、レイアウト等が崩れてしまう件

  • 解決済 WP_manabu

    (@wp_manabu)



    いつも、お世話になっております。

    さくらのレンタルサーバー、テーマはtwelve seventeenを利用しております。

    functions.phpを、親テーマのフォルダーから、子テーマのフォルダーに複製したところ、ヘッダーの写真が著しく拡大し、レイアウトも大幅に崩れてしまいました。

    なお、現在は子テーマに複製したfunctions.phpは削除しています。がしかし、やはり同じ症状が出ており、元には戻らない状況です。どうぞ原因をご教示くださいませ。

    ヘルプの必要なページ: [リンクを見るにはログイン]

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • npssl

    (@npssl)

    子テーマの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')
        );
    }
    WP_manabu

    (@wp_manabu)

    ご回答、ありがとうございます。

    (すでに子テーマのfunctions.phpを削除していたため、再度、親テーマから子テーマに複製し)ご教示いただいたコードを貼りつけてみました。

    ヘッダーの写真は元のサイズに戻りましたが、文字部分が小さくなり。そのかわり、両脇に余白(padding?)が入るレイアウトになってしまいました。

    お手数ですが、もう少しお付き合い頂けると、とても助かったりします〜

    npssl

    (@npssl)

    子テーマのStyle.cssには何も記載されていないので、親テーマを編集したのではないですか?
    https://tsurumaki-office.com/wp-content/themes/twentyseventeen-child/style.css

    WP_manabu

    (@wp_manabu)

    いえ、親テーマのStyle.cssは編集しておりませんです。

    WP_manabu

    (@wp_manabu)

    ちなみに、(ユーザー名とパスワードを入力してログインする)いつものダッシュボードも、同様に、文字が小さく中央にレイアウトされ、左右の余白が、グンと広くなっています。なにかヒントになりますでしょうか。

    npssl

    (@npssl)

    残るは、親テーマの追加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>
    WP_manabu

    (@wp_manabu)

    子テーマの「追加CSS」をクリアしてみました。
    いちおう親テーマの「追加CSS」も確認しようと思ったのですが、ダッシュボードのレイアウトの不都合のせいか、テーマ変更 > 親の「有効」のボタンが表示されない状況です。

    RICK

    (@rickaddison7634)

    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' );
    のようなことをすると管理画面の一部がおかしくなった記憶があります。

    WP_manabu

    (@wp_manabu)

    RICKさま

    ありがとうございまーす!

    やってみましたー。改善ならずであります。

    npssl

    (@npssl)

    このフォーラムに何回も出てきてますが
    問題解決のためのチェックリスト
    確認してください。

    RICK

    (@rickaddison7634)

    とりあえず、私達から見られるWebページの領域では、カスタムCSSは表示&反映されていません。
    別のブラウザで表示してみて現状で問題がなければそれでOKかもしれません。

    管理画面についても同様に、別のブラウザで見れば正常に見られるかもしれません。

    要はブラウザに残っているキャッシュがいたずらをしているのかもしれないということです。

    WP_manabu

    (@wp_manabu)

    RICKさま ありがとうございます。

    Safari、Firefoxで確認してみました。こちらは、うまく表示されていました。
    現状利用しているChromeは、修正後、ちくいちキャッシュをクリアしていたのですけれど、これが、だめなんですよー。

    npsslさま お手数をおかけしました。ありがとうございました。

    おかげさまで、子テーマでのfunctions.phpの扱いは要注意、ということが分かりました。ご教示いただいた同ファイルのコードについては、おいおい、学んでいきたいと存じます。

    npssl

    (@npssl)

    子テーマに親テーマのファンクションを丸ごとコピーして持ってくるなんて記事をどこで読んだのですか?
    https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

    RICK

    (@rickaddison7634)

    私がテーマを編集してからGoogle Chromeのキャッシュを削除する際は、以下のようにしています。

    1. キャッシュを削除したいページでF12を押す
    2. 更新ボタンを長押し or 右クリック
    3. キャッシュの削除とハード再読込をクリック

    手順1終了時にはDeveloper Toolが起動します。
    気になる部分にどのようなスタイルが適用されているのか等が
    確認できるのでテーマをいじる際には結構重宝しています。

    ちなみに気になる部分を右クリック→検証でも同様のことができます。

    WP_manabu

    (@wp_manabu)

    npsslさま

    ネット上の記事を参照にしたりしました。チェックしたものはブックマークしておくのですが、いま確認したら、肝心のそれが見つからないという…

    検索結果で、つらつら見ていて..なんでワードプレスのチュートリアルを最初に当たらなかったのか..ご指摘いただき、
    後悔ひとしきりであります。そのぶん、お手数をおかけしたりして。反省。

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • このトピックに返信するにはログインが必要です。