子テーマの表示が崩れる
フォーラム › テンプレート(テーマ) › 子テーマの表示が崩れる
-
投稿者投稿
-
2017年9月17日 9:35 AM #83969appletea参加者
——————————————-
WordPress のバージョン:WordPress 4.8.1
Welcart のバージョン:Version 1.9.4.1709123
ご利用のテーマ:Welcart Basic
症状を確認したブラウザ:IE11
サーバー(会社名、サービス名):ロリポップ
——————————————–Welcart Basic子テーマを作って使用していましたが、昨日突然フォルダが消えてしまいました。
再度子テーマを作成しなおして読み込みしましたが、レイアウトが崩れてしまいます。(商品画像の隣に商品説明等が来るはずが下に表示される。カラーバリエーションなどの背景がグレーになるはずが無色、「カートへ入れる」がオレンジのはずが無色など)・style.css
・functions.php
・header.phpは下記の通りです。
どこが間違っているのでしょうか。
よろしくお願いします。style.cssは
/*
Theme Name: Welcart Basic Child
Description: Welcart Basic Child Theme
Author: Collne Inc
Template: welcart_basic
Version: 1.2.4
Theme URI:自分のサイトのURL
Author:自分の名前
*/functions.php は
functions.phpの1行目には「<?」を入力。
続けて下記ソースを記載。add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
header.phpは
<?php /** * @package Welcart * @subpackage Welcart_Basic */ ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="format-detection" content="telephone=no"/> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header id="masthead" class="site-header" role="banner"> <div class="inner cf"> <p class="site-description"><?php bloginfo( 'description' ); ?></p> <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?> <<?php echo $heading_tag; ?> class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></<?php echo $heading_tag; ?>> <?php if(! welcart_basic_is_cart_page()): ?> <div class="snav cf"> <div class="search-box"> <i class="fa fa-search"></i> <?php get_search_form(); ?> </div> <?php if(usces_is_membersystem_state()): ?> <div class="membership"> <i class="fa fa-user"></i> <ul class="cf"> <?php if( usces_is_login() ): ?> <li><?php printf(__('Hello %s', 'usces'), usces_the_member_name('return')); ?></li> <li><?php usces_loginout(); ?></li> <li><a>"><?php _e('My page', 'welcart_basic') ?></a></li> <?php else: ?> <li><?php _e('guest', 'usces'); ?></li> <li><?php usces_loginout(); ?></li> <li><a>"><?php _e('New Membership Registration','usces') ?></a></li> <?php endif; ?> </ul> </div> <?php endif; ?> <div class="incart-btn"> <a>"><i class="fa fa-shopping-cart"><span><?php _e('In the cart', 'usces') ?></span></i><?php if(! defined( 'WCEX_WIDGET_CART' ) ): ?><span class="total-quant"><?php usces_totalquantity_in_cart(); ?></span><?php endif; ?></a> </div> </div><!-- .snav --> <?php endif; ?> </div><!-- .inner --> <?php if(! welcart_basic_is_cart_page()): ?> <nav id="site-navigation" class="main-navigation" role="navigation"> <label for="panel"><span></span></label> <input type="checkbox" id="panel" class="on-off" /> <?php $page_c = get_page_by_path('usces-cart'); $page_m = get_page_by_path('usces-member'); $pages = "{$page_c->ID},{$page_m->ID}"; wp_nav_menu( array( 'theme_location' => 'header', 'container_class' => 'nav-menu-open' , 'exclude' => $pages , 'menu_class' => 'header-nav-container cf' ) ); ?> </nav><!-- #site-navigation --> <?php endif; ?> </header><!-- #masthead --> <?php if( ( is_front_page() || is_home() ) && get_header_image() ): ?> <div class="main-image"> <img />" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php bloginfo('name'); ?>"> </div><!-- main-image --> <?php endif; ?> <?php if( is_front_page() || is_home() || welcart_basic_is_cart_page() || welcart_basic_is_member_page() ) { $class = 'one-column'; }else { $class = 'two-column left-set'; }; ?> <div>">
2017年9月18日 12:17 AM #83971appletea参加者https://www.welcart.com/docs/themes/welcart_basic/child_theme.html
こちらのサイトの
・style.css
・functions.php
のみ使用、functions.phpに「<?」を加えたらうまく行きました。
お騒がせしました2017年9月19日 3:30 PM #83983appletea参加者ありがとうございます。
子テーマ作成においてアップしているファイルは以下の3つのみです。・style.css
・functions.php
・header.phpそのうちheader.phpの一番最後の方の「$class = ‘two-column right-set’;」の「right」を「left」に変更しています。
iphoneのスクリーンショットを添付しておきます。
左の赤枠部分にレイアウトが崩れて(横に4枚並べている画像が縦に1枚ずつ並んでいる)表示されています。
iphone画面を指でなぞって広げても拡大はできません。よろしくお願いします。
Attachments:
You must be logged in to view attached files.2017年9月19日 4:31 PM #83987ohnishiキーマスターこんにちは
1) 子テーマに設置されている style.css で、
トップページのスタイル調整を行っておりませんか?2) また子テーマではなく、
Welcart Basic を利用した場合も同じ表示になるという事ですが、
Welcart Basic を有効化にして、
ブラウザキャッシュを削除した場合でも同じ表示になりますでしょうか?3) お使いのWelcart Basic のバージョンをお教えいただけますか?
2017年9月19日 11:06 PM #83990appletea参加者ありがとうございます。
1.style.cssの記載内容は下記の通りです
/*
Theme Name: Welcart Basic Child
Description: Welcart Basic Child Theme
Author: Collne Inc
Template: welcart_basic
Version: 1.2.4
*/2.Welcart Basic を有効化にして、ブラウザキャッシュを削除した場合でも同じ表示のまま、変かはありません。
3.Welcart Basicバージョン: 1.2.4
引き続きよろしくお願いします。
2017年9月20日 10:11 AM #83992ohnishiキーマスター>2.Welcart Basic を有効化にして、ブラウザキャッシュを削除した場合でも同じ表示のまま、変かはありません。
上記の事から、「Welcart」以外のプラグインのスタイルが
効いてしまっているという事はないでしょうか?「Welcart」と「WP Multibyte Patch」以外のプラグインを停止した状態で、Welcart Basic での表示確認を行ってみてください。
それでも変わらない場合は、
現在使用されているWelcart Basic を一旦削除いただき、
マイページから Welcart Basic を再ダウンロードし、
有効化にした状態で、表示の確認をしてみてください。- この返信は7年、 2ヶ月前にohnishiが編集しました。
2017年9月20日 2:54 PM #83999appletea参加者ありがとうございます。
>「Welcart」と「WP Multibyte Patch」以外のプラグインを停止した状態で、
>Welcart Basic での表示確認を行ってみてください。変化なしです。
>現在使用されているWelcart Basic を一旦削除いただき、
>マイページから Welcart Basic を再ダウンロードし、こちらも変化なしです。
テーマを「Welcart Default Themeバージョン: 1.3」にしてみたらiphoneでもきれいに表示されます。
どうでしょうか??2017年9月21日 9:04 AM #84005ohnishiキーマスター2017年9月21日 10:11 PM #84018appletea参加者ありがとうございます。
Welcart Basic デモサイトはこのように表示されます。
iphoneのブラウザは「Yahoo!」の赤マークのものとSafariで確認しましたが、いずれもWelcart Basic デモサイトは添付のように表示され、当方のHPは以前添付したように左に偏って表示されます。
よろしくお願いします。
Attachments:
You must be logged in to view attached files.2017年9月22日 2:43 PM #84024ohnishiキーマスター通常、Welcart Basic のデフォルト表示は、
デモサイトのような表示になります。確認ですが、
管理画面 > 設定 > 表示設定 の「フロントページの表示」は
【最新の投稿】になっていますでしょうか?申し訳ないですが、
その他に考えられることがございませんので、
Google などのデベロッパーツールを利用し、
スタイルシート( welcart basic/style.css )が読み込まれているかや、
(モバイルエミュレーター機能でスマホ表示にし)
どの部分でキャプチャ画像の表示になってしまっているかなど
検証いただくほかありません。どうぞよろしくお願いいたします。
2017年9月22日 10:30 PM #84034appletea参加者「固定ページ」のHOMEになっていました。
「最新の投稿」にしたところ、画面全体に表示されるようにはなりましたが、HOME(index.html)に載せていたものがすべて表示されなくなり、どうやってピックアップされたのかわからない商品4点が表示されるようになりました。
(この4点が最後=最新に更新した商品かというとそうではありません)>Google などのデベロッパーツールを利用し、
これは当方には技術的に難しいです、残念ですが。上記症状で予想される状態はありませんか?
2017年9月22日 11:07 PM #84035appletea参加者ページを表示させ「一般設定の『サイトのタイトル』で設定した店名」をクリックすると
・
2017年9月22日 11:30 PM #84036appletea参加者原因がわかりました。
の「width=”1000″」を設定していたのが原因のようです。大変お騒がせしました。
ありがとうございました。 -
投稿者投稿
- このトピックに返信するにはログインが必要です。