Published on

WordPressでLP風テーマを自作する方法

目次

WordPressのテーマを自作したときの手順になります
既にテーマ作成についての記事は多くあると思いますがご容赦下さい。。。

実際に作ったデモ

環境

・Windows
・vagrant
・wocker(便利)

用途

ブログとしてのテーマというよりはLPのような固定ページをフロントとして使いたいときに使用することを想定

ブランクテーマ選定

すべてのファイルをいちから作成するのはちょっと非効率なので必要最小限のファイルが元々入っているテーマを選びます
今回は「Bones」を使用しました。

理由として候補はいくつかあったのですが今回の目的では余計な時間をかけずカスタマイズに集中できそうだったからです。

テーマに導入するフレームワーク選定

今回はBulmaCSSを使いたいと最初から思っていたのでBulmaに決定

ページに使う効果はinview.jsとAnimate.cssを使用

作業に入る

ここから制作

外部ファイルを読み込む

header.phpに直接ではなくfunction.phpに書く

//css
function my_css() {
   wp_enqueue_style( 'bulmacss', get_bloginfo( 'stylesheet_directory') . '/library/css/bulma.css', array(), null, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_css');

//js
function my_js() {
    wp_enqueue_script( 'inview', get_bloginfo( 'stylesheet_directory') . '/library/js/inview.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_js');

フロントとしてつかうテンプレートを作成

テーマフォルダにfrontpage.phpと言った具合でわかりやすくテンプレートファイルを作成

作成したページ内に以下を追加

<?php
/*
 * Template Name: フロントページ
 *
 */

?>

これで固定ページからテンプレートを選択できるようになる

そしてヘッダーとフッターを読み込ませて中身を作成していく

<?php
/*
 * Template Name: フロントページ
 *
 */
?>

 <?php get_header(); ?>

 <!-- 省略 -->

 <?php get_footer(); ?>

あとはコーディングをご自由に

 <!-- 省略 -->

 <?php get_header(); ?>
<div class="container">


<!-- 記事を含める場合こんな風にループを入れる -->
<div class="columns">
<?php $query = new WP_Query( 'posts_per_page=6' ); ?>
 <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

 <div class="column is-4">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

   <div class="content">
    <?php the_content(); ?>
   </div>
   <p class="postmetadata"><?php _e( 'Posted in' ); ?> <?php the_category( ', ' ); ?></p>
 </div> 

 <?php endwhile; 
 wp_reset_postdata();
 else : ?>
 <p><?php _e( 'Sorry, no posts matched .' ); ?></p>
 <?php endif; ?>

<!--/ 記事 -->

 </div>
</dvi>


 <?php get_footer(); ?>

新規で作成したテンプレートができたらほかのテンプレート
single.php(投稿記事),page.php(固定ページ),archive.php(アーカイブ)などもコーディングします

管理画面へテーマオプションを追加する

管理画面から色の変更をしたりオリジナルのテキストを表示させるためには管理画面上でオリジナルの項目を追加、値を保存し、テンプレート側で保存した値を出力する必要があります。

カスタマイザーにオリジナルの項目を追加する場合はWordPressのテーマカスタマイズ APIを使う
ここの説明は簡単に、、、

例

function mytheme_customize_register( $wp_customize ) {
       // セクション、テーマ設定、コントロールを追加します。
　　$wp_customize->add_section( 'mytheme_new_section_name' , array(
       'title' => __( 'Visible Section Name', 'mytheme' ),
       'priority'   => 30,
   ));
　　$wp_customize->add_setting( 'header_textcolor' , array(
       'default'     => '#000000',
       'transport'   => 'refresh',
       'sanitize_callback' => 'header_textcolor_validate',
   ));

  　$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize,    
  　'link_color', array(
       'label'        => __( 'Header Color', 'mytheme' ),
       'section'    => 'your_section_id',
       'settings'   => 'your_setting_id',
   )));
}
   add_action( 'customize_register', 'mytheme_customize_register' );

その値を出力する

<?php echo get_theme_mod('header_textcolor',$defalt); ?>

テーマオプションをカスタマイザーではなく管理画面のメニューに追加しているテーマをよく見かけます
その場合はadd_menu_pageを使ってメニューを追加します。
ここの説明も簡単に、、、

例

<?php
/** 上のテキストのステップ2 */
add_action( 'admin_menu', 'my_plugin_menu' );

/** ステップ1 */
function my_plugin_menu() {
    add_options_page( 'My Plugin Options', 'My Plugin', 'manage_options', 'my-unique-identifier', 'my_plugin_options' );
}

/** ステップ3 */
function my_plugin_options() {
    if ( !current_user_can( 'manage_options' ) )  {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }
    echo '<div class="wrap">';
    echo '<p>オプション用のフォームをここに表示する。</p>';
    echo '</div>';
}
?>

ステップ1のmanage_optionsここがmanage_options以外だと権限の問題でエラーがでたと思います。

フォームなどを作成し入力されたテキストなどの保存はregister_settingを使います

例

function register_my_setting() {
    register_setting( 'my_options_group', 'my_option_name' ); 
} 
add_action( 'admin_init', 'register_my_setting' );

また、<form>直後にsettings_fieldsとdo_settings_sectionsを入れないと保存されません

<form method="post" action="options.php">
<?php
     settings_fields( 'my_options_group' );
     do_settings_sections( 'my_options_group' );
?>

<!-- 省略 -->

<?php submit_button(); ?>
</form>

出力

<?php echo get_option('my_option_name'); ?>

実際にテンプレートに組み込む場合の表示はこんな感じでできます

<div class="column">
<?php echo get_option('my_option_name');?>
</div>

<!-- あるいは -->
<?php $theme_option = get_option('my_option_name');?>
<div class="column">
<?php echo $theme_option ;?>
</div>

一個作っとくと楽かも

今回はSEO対策的など基本的な部分以外はほとんど手を加えていないので細かい作業をしていくと意外と時間がとられると思います。しっかりしたものを一個作っとくと見た目は子テーマでいじれるのでいいかもですね