質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

1282閲覧

WordPressのWelcart Vollのスマホ表示で、商品一覧の横並び数を変更したい

shiratama_0826

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/08/19 01:30

前提・実現したいこと

WordPressのWelcart VollというテーマでECサイトの立ち上げを図っています。
デフォルトではスマホ表示で商品一覧は2列ですが
4列に変更したいと考えています。
どこを修正すればよいのか見当がつかず、
ご教示いただけませんでしょうか。
front-page.phpではないのでしょうか。

参考サイト
https://www.welcart.com/archives/5468.html

デモページ
https://themes.welcart.info/basic-voll/

該当のソースコード

PHP

1<?php 2/** 3 * @package Welcart 4 * @subpackage Welcart Voll 5 */ 6get_header(); ?> 7 8 <div id="primary" class="site-content"> 9 <div id="content" role="main"> 10 11 <?php if(get_header_image()): ?> 12 <section id="main-visual" class="flex-row entries fromBottomIn" data-scroll="once"> 13 14 <?php $headers = get_uploaded_header_images(); ?> 15 <div id="main_slide" class="flexslider"> 16 <?php if( $headers ): ?> 17 <ul class="slides"> 18 <?php foreach ($headers as $key => $value): ?> 19 <?php 20 //this code is refered to: http://frankiejarrett.com/get-an-attachment-id-by-url-in-wordpress/ 21 //in order to get attachment id from image url. 22 $parse_url = explode( parse_url( WP_CONTENT_URL, PHP_URL_PATH ), $value['url'] ); 23 $this_host = str_ireplace( 'www.', '', parse_url( home_url(), PHP_URL_HOST ) ); 24 $file_host = str_ireplace( 'www.', '', parse_url( $value['url'], PHP_URL_HOST ) ); 25 if ( ! isset( $parse_url[1] ) || empty( $parse_url[1] ) || ( $this_host != $file_host ) ) { 26 return; 27 } 28 global $wpdb; 29 $img_id = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM {$wpdb->prefix}posts WHERE guid RLIKE %s;", $parse_url[1] ) ); 30 $img_meta = get_post( $img_id[0] ); 31 $img_caption = $img_meta->post_excerpt; 32 ?> 33 <li data-thumb="<?php echo $value['url']; ?>"> 34 <?php if($img_meta->post_content && (strpos($img_meta->post_content, 'jpg')===false)): ?> 35 <a href="<?php echo esc_html($img_meta->post_content); ?>"> 36 <?php endif; ?> 37 <img src="<?php echo $value['url']; ?>"> 38 <?php if($img_meta->post_content && (strpos($img_meta->post_content, 'jpg')===false)): ?> 39 </a> 40 <?php endif; ?> 41 <?php if(! empty($img_caption)): ?> 42 <div class="caption fromBottomIn" data-scroll="once"><?php echo $img_caption; ?></div> 43 <?php endif; ?> 44 </li> 45 <?php endforeach; ?> 46 </ul> 47 <?php else: ?> 48 <div class="main-visual"><img src="<?php header_image(); ?>" alt="*" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>"><div class="caption fromBottomIn" data-scroll="once"><?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?></div></div> 49 <?php endif; ?> 50 </div><!-- #main_slide --> 51 52 53 </section><!-- #main-visual --> 54 <?php endif; ?> 55 56 <?php if ( 'page' == get_option( 'show_on_front' ) ): ?> 57 58 <div class="sof"> 59 <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 60 <article <?php post_class('fromBottomIn') ?> id="post-<?php the_ID(); ?>" data-scroll="once"> 61 62 <h2 class="entry-title"><?php the_title(); ?></h2> 63 64 <div class="entry-content"> 65 <?php the_content(); ?> 66 </div> 67 </article> 68 <?php endwhile; else: ?> 69 <p><?php _e( 'Sorry, no posts matched your criteria.', 'usces' ); ?></p> 70 <?php endif; ?> 71 </div> 72 73 <?php else: ?> 74 75 <?php if ( is_active_sidebar( 'voll-top' ) ): ?> 76 <section id="home-widget-top" class="home-widget widget-area entries"> 77 <?php dynamic_sidebar( 'voll-top' ); ?> 78 </section> 79 <?php endif; ?> 80 81 <?php 82 $term_ids = array(); 83 $target_terms = get_terms( 'category', array( 'child_of' => usces_get_cat_id( 'item' ) ) ); 84 if( ! empty( $target_terms ) && ! is_wp_error( $target_terms ) ) { 85 foreach( $target_terms as $target_term ) { 86 $img_url = get_term_meta( $target_term->term_id, 'wcct-tag-thumbnail-main-url', true ); 87 if( ! empty( $img_url ) ) 88 $term_ids[] = $target_term->term_id; 89 } 90 } 91 if( $term_ids ): 92 ?> 93 94 <section class="category-area entries"> 95 <div class="cf slider cat-slider"> 96 <?php 97 foreach( $term_ids as $term_id ): 98 $term = get_term_by( 'id', $term_id, 'category' ); 99 $img_bg_url = get_term_meta( $term_id, 'wcct-tag-thumbnail-main-url', true ); 100 $img_id = get_term_meta( $term_id, 'wcct-tag-thumbnail-main-id', true ); 101 if( ! empty( $img_id ) ) { 102 $img_att = wp_get_attachment_image_src( $img_id, 'large' ); 103 $img_bg_url = $img_att[0]; 104 } 105 ?> 106 <div class="cat_box fromBottomIn" data-scroll="once"> 107 <a href="<?php echo get_category_link( $term_id ); ?>"> 108 <div class="cat_img"><img src="<?php echo $img_bg_url; ?>"></div> 109 <div class="over"> 110 <div class="inner"> 111 <div class="cat-name"><?php esc_html_e( $term->name ); ?></div> 112 <div class="cat-desc"><?php esc_html_e( $term->description); ?></div> 113 </div><!-- .inner --> 114 </div> 115 </a> 116 </div><!-- .cat-box --> 117 <?php 118 endforeach; 119 ?> 120 </div><!-- .cat-slider --> 121 </section><!-- category-area --> 122 123 <?php endif; ?> 124 125 <?php if ( is_active_sidebar( 'voll-middle' ) ): ?> 126 <section id="home-widget-middle" class="home-widget widget-area entries"> 127 <?php dynamic_sidebar( 'voll-middle' ); ?> 128 </section> 129 <?php endif; ?> 130 131 <section class="front-il entries"> 132 <?php if( have_posts() ) : ?> 133 134 <?php if(wcct_get_options('home_cat_title')): ?> 135 <h2><span><?php echo get_cat_name( get_query_var( 'cat' ) ); ?></span></h2> 136 <?php endif; ?> 137 138 <div class="list-wrap cf"> 139 140 <?php while( have_posts() ) : the_post(); usces_the_item(); ?> 141 142 <article id="post-<?php the_ID(); ?>" <?php post_class('fromBottomIn'); ?> data-scroll="once"> 143 <div class="inner item-info"> 144 <?php wcct_produt_tag(); ?> 145 <div class="itemimg"> 146 <a href="<?php the_permalink(); ?>"> 147 <?php usces_the_itemImage( 0, 600, 600 ); ?> 148 <?php if( wcct_get_options( 'display_soldout' ) && !usces_have_zaiko_anyone() ): ?> 149 <div class="itemsoldout"> 150 <div class="text"> 151 <?php _e( 'SOLD OUT', 'welcart_basic_voll' ); ?> 152 <?php if( wcct_get_options( 'display_inquiry' ) ): ?> 153 <span class="sub_text"><?php wcct_options( 'display_inquiry_text' ); ?></span> 154 <?php endif; ?> 155 </div> 156 </div> 157 <?php endif; ?> 158 </a> 159 </div> 160 <?php welcart_basic_campaign_message(); ?> 161 <div class="itemname"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php usces_the_itemName(); ?></a></div> 162 <div class="itemprice"><?php usces_the_firstPriceCr() . usces_guid_tax(); ?></div> 163 </div><!-- .inner --> 164 </article> 165 166 <?php endwhile; ?> 167 </div><!-- list-wrap --> 168 169 <?php else: ?> 170 171 <p class="no-date"><?php _e( 'Sorry, no posts matched your criteria.', 'usces' ); ?></p> 172 173 <?php endif; ?> 174 </section><!-- .front-il --> 175 176 177 <?php if ( is_active_sidebar( 'voll-bottom' ) ): ?> 178 <section id="home-widget-bottom" class="home-widget widget-area entries"> 179 <?php dynamic_sidebar( 'voll-bottom' ); ?> 180 </section> 181 <?php endif; ?> 182 183 184 <?php 185 if( wcct_get_options( 'display_info' ) ): 186 $info_num = wcct_get_options( 'info_num' ); 187 $info_cat_slug = wcct_get_options( 'info_cat' ); 188 $info_cat = get_term_by( 'slug', $info_cat_slug, 'category' ); 189 ?> 190 191 <section class="info-area entries cf fromBottomIn" data-scroll="once"> 192 193 <h2><span><?php echo $info_cat->name; ?></span></h2> 194 195 <div class="wrap"> 196 <?php 197 $info_args = array( 198 'posts_per_page' => $info_num, 199 'category_name' => $info_cat_slug, 200 ); 201 $info_query = new WP_Query( $info_args ); 202 if ( $info_query->have_posts() ): 203 while ( $info_query->have_posts() ): 204 $info_query->the_post(); 205 ?> 206 <article id="post-<?php the_ID(); ?>" class="cf"> 207 <div class="inner cf"> 208 <div class="cf"> 209 <div class="post-date"> 210 <?php the_time('Y/n/j'); ?> 211 </div> 212 <div class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 213 </div><!-- cf --> 214 <?php if ( has_post_thumbnail() ): ?> 215 <div class="post-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( /*'full'*/array(500,500) ); ?></a></div> 216 <?php endif; ?> 217 <div class="post-excerpt"><?php the_excerpt(); ?></div> 218 </div><!-- .inner --> 219 </article> 220 <?php 221 endwhile; 222 wp_reset_postdata(); 223 else: 224 ?> 225 <p class="no-date"><?php _e( 'Sorry, no posts matched your criteria.', 'usces' ); ?></p> 226 <?php 227 endif; 228 ?> 229 </div><!-- cat-slider --> 230 231 232 </section><!-- info-area --> 233 234 <?php endif; ?> 235 236 <?php endif; ?> 237 238 239 </div><!-- #content --> 240 </div><!-- #primary --> 241 242<?php get_sidebar(); ?> 243<?php get_footer(); ?>

恐れ入りますが、お知恵をお借りできれば幸いです。
よろしくお願いいたします。

補足情報(FW/ツールのバージョンなど)

——————————————-
WordPress のバージョン:WordPress 5.4.2
Welcart のバージョン:1.2.14
PHP のバージョン:7.1.33
利用中のテーマ:Welcart Voll: 1.0.8
ブラウザ:chrome
——————————————–

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

すみません。CSSの改変でなんとかなりそうです。
閲覧いただいた方ありがとうございました。

投稿2020/08/19 02:36

shiratama_0826

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問