[ 質問者返信待ち ] トップページのみ複雑なデザインの実装について

タグ: その他

このトピックには2件の返信、3人の参加者があり、最後に石川＠Vektor,Inc.により2年、 7ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿

2022年4月9日 10:53 AM #63997

栃本常善

参加者

■ WordPress のバージョン
WordPress 5.9.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
その他

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
・LightningのデザインスキンのEvergreenを使用しております。
・複雑なデザインを実装するために、トップページのみオリジナル（スクラッチ）でコーディングし、topページの投稿、カスタム投稿を機能させたい。
(下層ページは、LightningのデザインスキンのEvergreenのデフォルトの機能を使いたい)

■ 自分で試した事
・子テーマに、index.phpを作成し、コーディングしました。
・デザインは実装できたしたが、投稿をクリニックするとページが見つかりませんとなります。

<?php
/**
 * Lightning G3 index.php common template-file
 *
 * @package vektor-inc/lightning
 */

use VektorInc\VK_Breadcrumb\VkBreadcrumb;

?><?php lightning_get_template_part( 'header' ); ?>
<div class="l-header">
  <?php
do_action( 'lightning_site_header_before', 'lightning_site_header_before' );
if ( apply_filters( 'lightning_is_site_header', true, 'site_header' ) ) {
	lightning_get_template_part( 'template-parts/site-header' );
}
do_action( 'lightning_site_header_after', 'lightning_site_header_after' );
?>
</div>

<?php
if ( is_front_page() ) {
	if ( apply_filters( 'lightning_default_slide_display', true ) ) {
		LTG_G3_Slider::display_html();
	}
}
?>

<?php if ( ! is_front_page() ) : ?>

<?php
	do_action( 'lightning_page_header_before', 'lightning_page_header_before' );
	if ( apply_filters( 'lightning_is_page_header', true, 'page_header' ) ) {
		lightning_get_template_part( 'template-parts/page-header' );
	}
	do_action( 'lightning_page_header_after', 'lightning_page_header_after' );
	?>

<?php
	do_action( 'lightning_breadcrumb_before', 'lightning_breadcrumb_before' );
	if ( apply_filters( 'lightning_is_breadcrumb_position_normal', true, 'breadcrumb_position_normal' ) ) {
		if ( apply_filters( 'lightning_is_breadcrumb', true, 'breadcrumb' ) ) {
			$vk_breadcrumb      = new VkBreadcrumb();
			$breadcrumb_options = array(
				'id_outer'        => 'breadcrumb',
				'class_outer'     => 'breadcrumb',
				'class_inner'     => 'container',
				'class_list'      => 'breadcrumb-list',
				'class_list_item' => 'breadcrumb-list__item',
			);
			$vk_breadcrumb->the_breadcrumb( $breadcrumb_options );
		}
	}
	do_action( 'lightning_breadcrumb_after', 'lightning_breadcrumb_after' );
	?>

<?php endif; ?>

<main>
  <div class="l-slider-fv">
    <?php get_template_part('/slider-fv') ?>
  </div>
  <div class="l-inner">
    <div class="l-slider-logo">
      <?php get_template_part('/slider-logo') ?>
    </div>

    <section class="l-passion p-passion" id="passdion">
      <div class="p-title p-passion__heading">
        <span class="p-title__reception--left"></span>
        <h2>清掃にかける想い<span class="reception">passion</span></h2><span class="p-title__reception--right"></span>
      </div>
      <div class="p-passion__body">
        <div class="p-passion__text">
          <p>
            昨今は人材の確保の難しさから、清掃業務がより敬遠され、キレイを保つことが難しくなっています。とは言えお客様が清掃のために時間を割けば良いというものでもありません。<br><br>
            私たちはその課題に、<span>“誇りもって清掃の仕事ができる組織”と“必要な清掃を組み立てる予算管理・スケジュール管理”</span>という「10年後も当たり前にキレイ」を維持する仕組みによって、お客様に事業に専念していただくための運営パートナーとなります。
            <br><br>具体的には、清掃人材の管理、マニュアルに基づいた清掃業務の見える化、最適な清掃提案と管理など、清掃に関するあらゆる視点からトータルでサポートしております。多くのお客様のお困りごとに真摯に向き合いながら、ひとつひとつ丁寧に、徹底的に“当たり前のキレイ”を持続することが当社の使命です。
          </p>
        </div>
      </div>
      <figure class="p-passion__img">
        <img src="<?php echo esc_url(get_theme_file_uri('/img/passion-img1.jpg')); ?>" alt="">
    </section>
    <section class="l-merit p-merit" id="merit">
      <div class="p-title p-merit__heading">
        <span class="p-title__reception--left"></span>
        <h2>選ばれる5つの理由<span class="reception">merit</span></h2><span class="p-title__reception--right"></span>
      </div>
      <div class="p-merit-intro">当社では10年先のキレイを保つ清掃品質維持を徹底しています。明確なマニュアルをもとに、清掃チーム一丸となって行う清掃は、豊富な実績と経験でお客様から信頼をいただいております。
      </div>
      <div class="p-merit-cards justify-content-md-center">
        <a class="p-merit-card">
          <div class="p-merit-card__top">
            <div class="p-merit-card__reason">理由<span class="p-merit-card__reason-no">1</span><img
                src="<?php echo esc_url(get_theme_file_uri('/img/two-star.png')); ?>" alt=""></div>
            <h3 class="p-merit-card__title">清掃スタッフの確保と<br>教育ができる会社<span class="font-wight500">だから</span></h3>
          </div>
          <figure class="p-merit-card__img">
            <img src="<?php echo esc_url(get_theme_file_uri('/img/top-merit-1.jpg')); ?>" alt="">
            <span class="p-merit-card__link-arrow"></span>
          </figure>
        </a>
        <a class="p-merit-card">
          <div class="p-merit-card__top">
            <div class="p-merit-card__reason">理由<span class="p-merit-card__reason-no">1</span><img
                src="<?php echo esc_url(get_theme_file_uri('/img/two-star.png')); ?>" alt=""></div>
            <h3 class="p-merit-card__title">清掃スタッフの確保と<br>教育ができる会社<span class="font-wight500">だから</span></h3>
          </div>
          <figure class="p-merit-card__img">
            <img src="<?php echo esc_url(get_theme_file_uri('/img/top-merit-1.jpg')); ?>" alt="">
            <span class="p-merit-card__link-arrow"></span>
          </figure>
        </a>
        <a class="p-merit-card">
          <div class="p-merit-card__top">
            <div class="p-merit-card__reason">理由<span class="p-merit-card__reason-no">1</span><img
                src="<?php echo esc_url(get_theme_file_uri('/img/two-star.png')); ?>" alt=""></div>
            <h3 class="p-merit-card__title">清掃スタッフの確保と<br>教育ができる会社<span class="font-wight500">だから</span></h3>
          </div>
          <figure class="p-merit-card__img">
            <img src="<?php echo esc_url(get_theme_file_uri('/img/top-merit-1.jpg')); ?>" alt="">
            <span class="p-merit-card__link-arrow"></span>
          </figure>
        </a>
        <a class="p-merit-card">
          <div class="p-merit-card__top">
            <div class="p-merit-card__reason">理由<span class="p-merit-card__reason-no">1</span><img
                src="<?php echo esc_url(get_theme_file_uri('/img/two-star.png')); ?>" alt=""></div>
            <h3 class="p-merit-card__title">清掃スタッフの確保と<br>教育ができる会社<span class="font-wight500">だから</span></h3>
          </div>
          <figure class="p-merit-card__img">
            <img src="<?php echo esc_url(get_theme_file_uri('/img/top-merit-1.jpg')); ?>" alt="">
            <span class="p-merit-card__link-arrow"></span>
          </figure>
        </a>
        <a class="p-merit-card">
          <div class="p-merit-card__top">
            <div class="p-merit-card__reason">理由<span class="p-merit-card__reason-no">1</span><img
                src="<?php echo esc_url(get_theme_file_uri('/img/two-star.png')); ?>" alt=""></div>
            <h3 class="p-merit-card__title">清掃スタッフの確保と<br>教育ができる会社<span class="font-wight500">だから</span></h3>
          </div>
          <figure class="p-merit-card__img">
            <img src="<?php echo esc_url(get_theme_file_uri('/img/top-merit-1.jpg')); ?>" alt="">
            <span class="p-merit-card__link-arrow"></span>
          </figure>
        </a>
      </div>
      <div class="p-merit__btn">
        <a href="#" class="c-more-btn">もっと見る</a>
      </div>
    </section>
    <section class="l-service" id="service">
      <div class="p-title p-service__heading">
        <span class="p-title__reception--left"></span>
        <h2>業界別のサービス一覧<span class="reception">service</span></h2><span class="p-title__reception--right"></span>
      </div>
      <div class="p-service-cards p-service-cards-col2">
        <article class="p-service-card p-service-card-col2">
          <figure class="p-service-card__img">
            <h3 class="p-service-card__title">お困りごとの一例</h3>
            <img src="<?php echo esc_url(get_theme_file_uri('/img/serervice-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-service-card__text">
            <div class="p-service-card__text-case">お困りごとの一例</div>
            <ul class="p-service-card__text-case__lists">
              <li class="p-service-card__text-case__list">エアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪い</li>
              <li class="p-service-card__text-case__list">エアコンの効きが悪い</li>
              <li class="p-service-card__text-case__list">エアコンの効きが悪い</li>
            </ul>
          </div>
          <div class="p-service-card__bottom">
            <a href="<?php the_permalink(); ?>" class="c-more-btn-middle">もっと見る</a>
          </div>
        </article>
        <article class="p-service-card p-service-card-col2">
          <figure class="p-service-card__img">
            <h3 class="p-service-card__title">温浴施設さまへ</h3>
            <img src="<?php echo esc_url(get_theme_file_uri('/img/serervice-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-service-card__text">
            <div class="p-service-card__text-case">お困りごとの一例</div>
            <ul class="p-service-card__text-case__lists">
              <li class="p-service-card__text-case__list">エアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪い</li>
              <li class="p-service-card__text-case__list">エアコンの効きが悪い</li>
              <li class="p-service-card__text-case__list">エアコンの効きが悪い</li>
            </ul>
          </div>
          <div class="p-service-card__bottom">
            <a href="#" class="c-more-btn-middle">もっと見る</a>
          </div>
        </article>
        <article class="p-service-card p-service-card-col2">
          <figure class="p-service-card__img">
            <h3 class="p-service-card__title">温浴施設さまへ</h3>
            <img src="<?php echo esc_url(get_theme_file_uri('/img/serervice-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-service-card__text">
            <div class="p-service-card__text-case">お困りごとの一例</div>
            <ul class="p-service-card__text-case__lists">
              <li class="p-service-card__text-case__list">エアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪い</li>
              <li class="p-service-card__text-case__list">エアコンの効きが悪い</li>
              <li class="p-service-card__text-case__list">エアコンの効きが悪い</li>
            </ul>
          </div>
          <div class="p-service-card__bottom">
            <a href="#" class="c-more-btn-middle">もっと見る</a>
          </div>
        </article>
        <article class="p-service-card p-service-card-col2">
          <figure class="p-service-card__img">
            <h3 class="p-service-card__title">温浴施設さまへ</h3>
            <img src="<?php echo esc_url(get_theme_file_uri('/img/serervice-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-service-card__text">
            <div class="p-service-card__text-case">お困りごとの一例</div>
            <ul class="p-service-card__text-case__lists">
              <li class="p-service-card__text-case__list">エアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪いエアコンの効きが悪い</li>
              <li class="p-service-card__text-case__list">エアコンの効きが悪い</li>
              <li class="p-service-card__text-case__list">エアコンの効きが悪い</li>
            </ul>
          </div>
          <div class="p-service-card__bottom">
            <a href="#" class="c-more-btn-middle">もっと見る</a>
          </div>
        </article>
      </div>
    </section>
    <section class="l-main-service p-main-service">
      <div class="p-title p-main-service__heading">
        <span class="p-title__reception--left"></span>
        <h2>主要なサービス一覧<span class="reception">service</span></h2><span class="p-title__reception--right"></span>
      </div>
      <div class="p-service-cards">
        <article class="p-service-card p-service-card-col3">
          <figure class="p-service-card__img p-service-card-col3__img">
            <h3 class="p-service-card__title">温浴施設さまへ</h3>
            <img src="<?php echo esc_url(get_theme_file_uri('/img/serervice-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-service-card__bottom">
            <a href="#" class="c-more-btn-little">もっと見る</a>
          </div>
        </article>
        <article class="p-service-card p-service-card-col3">
          <figure class="p-service-card__img p-service-card-col3__img">
            <h3 class="p-service-card__title">温浴施設さまへ</h3>
            <img src="<?php echo esc_url(get_theme_file_uri('/img/serervice-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-service-card__bottom">
            <a href="#" class="c-more-btn-little">もっと見る</a>
          </div>
        </article>
        <article class="p-service-card p-service-card-col3">
          <figure class="p-service-card__img p-service-card-col3__img">
            <h3 class="p-service-card__title">温浴施設さまへ</h3>
            <img src="<?php echo esc_url(get_theme_file_uri('/img/serervice-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-service-card__bottom">
            <a href="#" class="c-more-btn-little">もっと見る</a>
          </div>
        </article>
      </div>
    </section>
  </div>
  <section class="l-cleaning-case p-cleaning-case" id="cleaning-case">
    <div class="p-title p-main-service__heading">
      <span class="p-title__reception--left"></span>
      <h2>清掃事例<span class="reception">cleaning case</span></h2><span class="p-title__reception--right"></span>
    </div>
    <div class="l-inner">
      <div class="p-cleaning-case-cards">
        <article class="p-cleaning-case-card">
          <h3 class="p-cleaning-case-card__title">タイトルテキスト</h3>
          <figure class="p-cleaning-case-card__img">
            <img src="<?php echo esc_url(get_theme_file_uri('/img/cleaning-case-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-cleaning-case-card__text">リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。（2〜3行）</div>
          <div class="p-cleaning-case-card__bottom">
            <a href="#" class="c-more-btn-little">もっと見る</a>
          </div>
        </article>
        <article class="p-cleaning-case-card">
          <h3 class="p-cleaning-case-card__title">タイトルテキスト</h3>
          <figure class="p-cleaning-case-card__img">
            <img src="<?php echo esc_url(get_theme_file_uri('/img/cleaning-case-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-cleaning-case-card__text">リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。（2〜3行）</div>
          <div class="p-cleaning-case-card__bottom">
            <a href="#" class="c-more-btn-little">もっと見る</a>
          </div>
        </article>
        <article class="p-cleaning-case-card">
          <h3 class="p-cleaning-case-card__title">タイトルテキスト</h3>
          <figure class="p-cleaning-case-card__img">
            <img src="<?php echo esc_url(get_theme_file_uri('/img/cleaning-case-img1.jpg')); ?>" alt="">
          </figure>
          <div class="p-cleaning-case-card__text">リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。（2〜3行）</div>
          <div class="p-cleaning-case-card__bottom">
            <a href="#" class="c-more-btn-little">もっと見る</a>
          </div>
        </article>
      </div>
    </div>
  </section>
  <section class="l-promise p-promise" id="promise">
    <div class="p-title p-main-service__heading">
      <span class="p-title__reception--left"></span>
      <h2>お客様へのお約束<span class="reception">promise</span></h2><span class="p-title__reception--right"></span>
    </div>
    <div class="l-inner">
      <div class="p-promise-cards">
        <article class="p-promise-card">
          <div class="p-promise-card--right">
            <figure class="p-promise-card__img promise-card-img--odd">
              <img src="<?php echo esc_url(get_theme_file_uri('/img/promise-img1.jpg')); ?>" alt="">
            </figure>
          </div>
          <div class="p-promise-card--left">
            <div class="p-promise-card__title-wrap">
              <h3 class="p-promise-card__title"><span><img
                    src="<?php echo esc_url(get_theme_file_uri('/img/two-ster-blue.png')); ?>" alt="">お約束1</span><br
                  class="sp-on">丁寧な報告・連絡・相談を<br class="sp-on">いたします</h3>
            </div>
            <div class="p-promise-card__text">
              各施設ごとに清掃チームを編成し、清掃リーダーを中心にスタッフ一丸となって清掃を行います。現場の状況に合わせて何をどのように清掃したのか、清掃リーダーから清掃内容を毎回報告いたします。清掃予定日の少し前に、ご予定の変更がないか確認のご連絡をさせていただいたり、設備の老朽化など気になる点があればメンテナンスをご相談するなど、お客様との丁寧なコミュニケーションを徹底しています。
            </div>
          </div>
        </article>
        <article class="p-promise-card">
          <div class="p-promise-card--right">
            <figure class="p-promise-card__img promise-card-img--even">
              <img src="<?php echo esc_url(get_theme_file_uri('/img/promise-img2.jpg')); ?>" alt="">
            </figure>
          </div>
          <div class="p-promise-card--left">
            <div class="p-promise-card__title-wrap">
              <h3 class="p-promise-card__title"><span><img
                    src="<?php echo esc_url(get_theme_file_uri('/img/two-ster-blue.png')); ?>" alt="">お約束1</span><br
                  class="sp-on">丁寧な報告・連絡・相談を<br class="sp-on">いたします</h3>
            </div>
            <div class="p-promise-card__text">
              各施設ごとに清掃チームを編成し、清掃リーダーを中心にスタッフ一丸となって清掃を行います。現場の状況に合わせて何をどのように清掃したのか、清掃リーダーから清掃内容を毎回報告いたします。清掃予定日の少し前に、ご予定の変更がないか確認のご連絡をさせていただいたり、設備の老朽化など気になる点があればメンテナンスをご相談するなど、お客様との丁寧なコミュニケーションを徹底しています。
            </div>
          </div>
        </article>
        <article class="p-promise-card">
          <div class="p-promise-card--right">
            <figure class="p-promise-card__img promise-card-img--odd">
              <img src="<?php echo esc_url(get_theme_file_uri('/img/promise-img3.jpg')); ?>" alt="">
            </figure>
          </div>
          <div class="p-promise-card--left">
            <div class="p-promise-card__title-wrap">
              <h3 class="p-promise-card__title"><span><img
                    src="<?php echo esc_url(get_theme_file_uri('/img/two-ster-blue.png')); ?>" alt="">お約束1</span><br
                  class="sp-on">丁寧な報告・連絡・相談を<br class="sp-on">いたします</h3>
            </div>
            <div class="p-promise-card__text">
              各施設ごとに清掃チームを編成し、清掃リーダーを中心にスタッフ一丸となって清掃を行います。現場の状況に合わせて何をどのように清掃したのか、清掃リーダーから清掃内容を毎回報告いたします。清掃予定日の少し前に、ご予定の変更がないか確認のご連絡をさせていただいたり、設備の老朽化など気になる点があればメンテナンスをご相談するなど、お客様との丁寧なコミュニケーションを徹底しています。
            </div>
          </div>
        </article>
      </div>
      <div class="p-promise__btn">
        <a href="#" class="c-more-btn-middle">もっと見る</a>
      </div>
    </div>
  </section>
  <section class="l-column p-column">
    <div class="p-title p-main-service__heading">
      <span class="p-title__reception--left"></span>
      <h2>コラム<span class="reception">column</span></h2><span class="p-title__reception--right"></span>
    </div>
    <div class="l-inner">

      <div class="p-column-cards">
        <?php
         $paged = get_query_var('paged')? get_query_var('paged') : 1;
  $args = array(
    'post_type' => 'post', 
    'orderby' => 'post_date',
    'showposts' => 10, 
    'posts_per_page' => 3,
  ); 
  $the_query = new WP_Query($args); ?>

        <?php if ( $the_query->have_posts() ): ?>
        <?php while($the_query->have_posts()):$the_query->the_post(); ?>
        <article class="p-column-card">
          <h3 class="p-column-card__title"><?php the_title(); ?></h3>
          <figure class="p-column-card__img">
            <?php
  if(has_post_thumbnail()):
    the_post_thumbnail('medium_thumbnail');
  else:
    ?>

            <img src="<?php echo get_template_directory_uri(); ?>/" alt="画像がないときの出力" />
            <?php 
      endif;
      ?>
          </figure>
          <div class="p-column-card__text"><?php echo mb_substr( get_the_excerpt(), 0, 26 ) . '･･･'; ?></div>
          <div class="p-column-card__bottom">
            <a href="/<?php the_permalink(); ?>" class="c-more-btn-little">もっと見る</a>
          </div>
        </article>
        <?php endwhile;?>
        <?php else: ?>
        <?php endif;?>
        <?php wp_reset_postdata(); ?>
      </div>
      <div class="p-column__btn">
        <a href="#" class="c-archive-btn">コラム一覧を見る</a>
      </div>
    </div>
  </section>
</main>
<?php do_action( 'lightning_site_footer_before', 'lightning_site_footer_before' );
if ( apply_filters( 'lightning_is_site_footer', true, 'site_footer' ) ) {
lightning_get_template_part( 'template-parts/site-footer' );
}
do_action( 'lightning_site_footer_after', 'lightning_site_footer_after' );
?>

<?php lightning_get_template_part( 'footer' ); ?>

■ 症状が発生するブラウザ
chrome、safari、edge、firefox

■ 実際の症状

Home

のページ下部にありますコラムの投稿をクリックすると下記のページにリンクします。
↓
https://kankyosoji.com/https:/kankyosoji.com/

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

2022年4月9日 4:01 PM #64010

対馬俊彦

参加者

制作実績

<a href="/<?php the_permalink(); ?>" class="c-more-btn-little">もっと見る</a>
　　↓
<a href="<?php the_permalink(); ?>" class="c-more-btn-little">もっと見る</a>
とすればよさそうです。

2022年4月12日 12:44 PM #64089

石川＠Vektor,Inc.

キーマスター

制作実績

1. index.php はほぼ全ページに影響するので改変はおすすめしていません。トップページだけ改変する場合は index.php を子テーマに複製 -> front-page.php に変更して利用してください。
2. が、1もトップページ全体がアップデートに追従しないので、下記のカスタマイズで、改変条件分岐を is_front_page() でするのが良いと思います。