WordPress PHPカスタム〜根本的に見た目を変える〜

最近、残業が続きJavaの調査が間に合わず。。。着手しやすいPHP(WordPress)に関して記載します。

PHPと言ってもWordPressですが。。。

根本的に見た目を変える

根本的に言うのは、CSSとかでレイアウトを変更。とかではなく直接表示しているPHPファイルをカスタムしようと言うものです。

具体的に

自分の使用している、テンプレートが「twentyseventeen」なのでWordPressのルートから下のようなパス(ディレクトリ)にあるindex.phpを編集します。
/wp-content/themes/twentyseventeen

実際のコードです。

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">
    <?php if ( is_home() && ! is_front_page() ) : ?>
        <header class="page-header">
            <h1 class="page-title"><?php single_post_title(); ?></h1>
        </header>
    <?php else : ?>
    <header class="page-header">
        <h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ); ?></h2>
    </header>
    <?php endif; ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            if ( have_posts() ) :

                /* Start the Loop */
                while ( have_posts() ) : the_post();

                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'template-parts/post/content', get_post_format() );

                endwhile;

                the_posts_pagination( array(
                    'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
                    'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
                    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
                ) );

            else :

                get_template_part( 'template-parts/post/content', 'none' );

            endif;
            ?>
        </main><!-- #main -->
    </div><!-- #primary -->
    <?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer(); ?>

ポイントは以下のメソッドです。

  1. get_header()
  2. the_post()
  3. get_sidebar()
  4. get_footer()

これらのメソッドで行なっている部分に触らないようにカスタムします。

実践その1

まずは現在使用しているファイル(index.php, footer.php, header.php, sidebar.php)が上の1〜4のメソッドに紐づいているところに注意します。

そして、動いているPHPファイルに影響がないように、各ファイルの名前をコピーして、名前を変更します自分はわかりやすいように以下のように変更しました。

index.php -> index-test.php
footer.php -> footer-test.php
header.php -> header-test.php
sidebar.php -> sidebar-test.php

そして、変更後の見た目をイメージします。
具体的に自分はヘッダーをスライド式にしたいのでbootstrapを使用した形に変えようと思います。具体的な実行コードと見た目はここのページにありました。

これを自分のブログページに実装するにはどうしたら良いか?

Headerを見る

見た目通りに横スクロールのメニューなのでheader.phpをいじります。

上述しましたが、テスト用のファイルがあるのでそれぞれの修正を行います。

header-test.phpを参照するようにするには?

ここのページによると
get_header( $name );の「$name」にheader-「name」.phpに対応するファイルをインクルードしてくれるようです。
[例]
get_header( 'test' );であればheader-test.phpを読み込むようです。

同様に他もメソッドも名前を変更して指定できるようです。

  1. get_header()
  2. the_post()
  3. get_sidebar()
  4. get_footer()

これで準備完了

これまでの作業でとりあえずは準備完了です。
これからゆっくりとデザインを考えるもよし、早速実装に入るもよし。

自分は仕事があるのでもう寝ます(笑)

でわでわ。。。