テンプレート(PHP)のカスタマイズ方法

404.phpファイルを2カラムから1カラムにカスタマイズする方法を例にしています。

  1. 親テーマの404.phpファイルを、子テーマにコピペします。
  2. 子テーマの404.phpファイルをカスタマイズします。

親テーマ

<?php
/**
 * 404
 * @package clock
 */

get_header();
?>

<!-- Breadcrumb
================================================== -->
<?php get_template_part( 'template-parts/breadcrumb/breadcrumb' ); ?>
<div class="mb-100"> </div>
<!-- end .mb-100 --> 

<!-- Content
================================================== -->
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="not-found-left"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>">404</a> </div>
      <!-- end .not-found-left --> 
      
    </div>
    <!-- end .col-lg-6 -->
    
    <div class="col-lg-6">
      <div class="not-found-right">
        <header class="page-header">
          <h1 class="page-title">
            <?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'clock' ); ?>
          </h1>
        </header>
        <!-- .page-header -->
        
        <div class="page-content">
          <p>
            <?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'clock' ); ?>
          </p>
          <?php get_search_form(); ?>
        </div>
        <!-- .page-content --> 
      </div>
      <!-- end .not-found-right --> 
    </div>
    <!-- end .col-lg-6 --> 
    
  </div>
  <!-- end .row --> 
</div>
<!-- end .container -->
<div class="mb-150"> </div>
<!-- end .mb-150 -->

<?php
get_footer();

子テーマ: 404.php

<?php
/**
 * 404
 * @package clock
 */

get_header();
?>

<!-- Breadcrumb
================================================== -->
<?php get_template_part( 'template-parts/breadcrumb/breadcrumb' ); ?>
<div class="mb-100"> </div>
<!-- end .mb-100 --> 

<!-- Content
================================================== -->
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="not-found-left"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>">404</a> </div>
      <!-- end .not-found-left --> 
    </div>
    <!-- end .col-lg-12 -->
  </div>
  <!-- end .row --> 
</div>
<!-- end .container -->
<div class="mb-150"> </div>
<!-- end .mb-150 -->

<?php
get_footer();