【仮】しもむらさんのWP自作テーマ制作の手順をまとめてみた【自分用】

しもむらさん動画まとめ 自分の記録
2020.12.22
manami
manami

こんにちは、田中真奈美（ @momo29_aus ）です。

この記事は、しもむらさんのYouTube動画「WordPressテーマ制作 with Bootstrap」をつくった際の自分用メモです。

しもむらさんの動画は解説がものすごく丁寧です。丁寧ゆえに苦労なく最後までできてしまい、動画を見ながら1度やっただけでは自分の力にならないかも…と思いました…笑

そこで動画を見なくても1人でつくれるようになるために、自分なりにまとめてみました。

①1度動画を見てテーマを作る
②復習する（要点をまとめる）
③動画なしで自力で制作に挑戦
④つまづいた部分を動画で確認

この記事は上記③を自力で行うためにまとめました。

上記を繰り返えすことで、WordPressの自作テーマ制作のスキルが定着するのではないか？
と思いました。

この動画の構成

①：Localの準備
②③④：HTML＆CSS
⑤～⑩：WP化
⑪：サーバーアップロード

この動画でできるようになること

▼全般

・Local by flyfeelのインストール
・Bootstrapを使ったサイトづくり
・WPプラグインを使った動的ページのサーバーアップロードの方法

▼WP

・WPのテンプレートタグを使った呼び出し
（ヘッダー、フッター、タイトル、リンク、サイトタイトルetc）
・サムネイル画像の追加
・メニュー機能の追加
・ウィジェット機能の追加
・サイト内検索機能の追加

作成手順（概要）

①Bootstrapを使ってHTML＆CSSでサイトをつくる
②WP化
（③サーバーアップロード）

作成手順（詳細）WP化から

【手順】

style.cssにTemplate Nameかく
↓
inde.html single.html page.htmlを全部拡張子をphpに変える
↓
functions.phpつくる
↓
（WP）外観→テーマ
My Themeを有効化
↓
画像のパスを変更する
get_template_directory_uri /img/xxx.jpg
↓
functions.phpでサムネイルの記述かく

↓
投稿5件、固定ページ5件つくる（カテゴリーも）
↓
index.php
メインコンテンツをコピペして2つにする
記事一覧を取得する　have_posts～
日付を取得　the_time
カテゴリー取得　the_category
サムネイル取得　has_post_thumbnail～
アイキャッチ画像に独自のクラスを設定

↑今回はいらないから消してよし
↓
the time( ” ) の中のパラメータを設定する
↓
―――――――――――― 07 ――――――――――――
functions.php
メニュー機能の記述かく　register_nav_menus
↓
index.php
グローバルナビ部分でナビゲーションメニューの取得
defaults = array～

theme_locationはfunctions.phpでかいた
register_nav_menus（メニュー機能）で設定したやつ
↓
（WP）
外観→メニュー
メニュー名入れて「メニューを作成」
カテゴリーを全てメニューに追加
メニューの位置　グローバルにチェック入れる
メニューを保存
↓
index.php
footerメニューも同じ設定する
グローバルナビのところの $defaultsの記述をコピペする
theme_locationは「footer-navigation」
↓
（WP）
フッダーメニューも同じ手順で追加する

―――――――――――― 08 ――――――――――――
「特定のタグが付いた記事を表示する」で
ピックアップ記事／読んでもらいたい記事（サイドバー）を設定する

ピックアップ記事のところに　WP_query $で関数を設定

（パーマリンク、タイトル、サムネイル）のタグを
ほかのところからコピペしてくる
↓
（WP）
投稿→クリック編集
タグに toppickup ってつける

該当するものがなかった時の記述は今回は削除
↓
サイドバーの読んでほしい記事のところも同じ手順で

―――――――――――― 09 ――――――――――――

functions.phpにウィジェットの記述かく
function my_widgets_init

①サイドバー
②フッターAbout
③フッターTwitter　→　3つ分かく
↓
（WP）
外観→ウィジェットが追加される

サイドバー
→　カスタムHTML、タイトル空欄、内容にHTML貼り付ける
※PHPは使えないのでパスを絶対パスに直す
保存
↓
index.php
サイドバーのところに　dynamic_sidebar　かく
↓
（WP）
ウィジェット
フッターAbout　→　テキスト
タイトル　About
内容　テキストテキストテキストテキスト…

フッターTwitter　→　カスタムHTML
タイトル　Twitter
内容　HTML貼り付ける　※PHP直す
↓
searchform.phpつくる

―――――――――――― 10 ――――――――――――

header.phpをつくる
index.phpからヘッダー部分を切り取って貼り付け
get_headerで置き換え
↓
sidebar.phpをつくる
index.phpからサイドバー部分を切り取って貼り付け
get_sidebarで置き換え
↓
footer.phpをつくる
index.phpからフッター部分を切り取って貼り付け
get_footerで置き換え
↓
single.php
メインコンテンツの
①h1のスタイル（記事のタイトル）
②本文のスタイル
をコピーして保管しておく
↓
index.phpを全部コピーしてsingle.phpに貼り付け
↓
保管しておいたスタイルに戻す
記事タイトル（indexではh2）
本文のスタイル（indexはディスクリプション）
ボタンはいらないので削除
本文の取得は　the_content
single.phpではピックアップ記事は削除する
↓
page.php
メインコンテンツのスタイルを保管しておく
single.phpを全部コピーして貼り付け
保管しておいたメインコンテンツのスタイルに戻す
page.phpではサイドバーを削除する
↓
header.php
タイトルを　is_home　を使って取得する

My Theme

My Theme

各ページの説明、役割（つくったページ、必須のファイル）

つくったページ
index.php　必須
functions.php　必須
header.php
footer.php
page.php → 固定ページ
single.php → 投稿ページ
sidebar.php
searchform.php
（style.css）　必須

（archive.php → 記事一覧ページ）

テンプレートタグ一覧（抜粋）

<?php get_header(); ?>
<?php the_permalink(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php the_time( `Y/n/j` ); ?>
<?php the_title(); ?>
<?php the_category(); ?>
<?php the_excerpt(); ?>
<?php dynamic_sidebar( `xxxx` ); ?>

functions.phpに記述したもの

// サムネイル
add_theme_support( 'post-thumbnails' );

// メニュー機能
register_nav_menus (
 array (
  'gloval-navigation' => 'グローバル',
  'footer-navigation' => 'フッター'
 )
);

// ウィジェットの登録
function my_widgets_init() {
 registersidebar( array (
  ' name ' => 'サイドバー',
  ' id ' => 'sidebar_widget01',
  ' before_widget ' => '<div class="container...">',
  ' after_widget ' => '</div>'
 ) );

add_action( 'widgets_init', 'my_widgets_init' );

serchform.phpに記述したもの

<form method="get" action="<?php home_url(); ?>">
  <input class="form-control" type="text" name="s" placeholder="search for">
</form>

つまづいたところ（使い方がよくわからなかったもの）

<?php wp_reset_postdata(); ?>
// 投稿記事をリセットする、ループ終了時に実行する

つくったページのリンク

1回目

My Theme
betrunkene.xsrv.jp

2回目

※準備中

コメント

タイトルとURLをコピーしました