WordPress chobi

【WordPress】XAMPPでのローカル環境構築と自作テーマ作成に挑戦してみた。【導入編】

はじめに

WordPressのデザインを自分で弄れたら楽しいだろうなと思い挑戦してみました。

今回は導入編ということで、テーマ作成をするのに必要な前提知識の理解をゴールに記事にしてみました。

【WordPress】ローカル環境構築編

ローカル環境構築

Xserverですでにアップロードしているサイトでローカル環境構築は失敗

最初にFTPですでにXserverに挙げているWordPressサイトを全てローカルにダウンロードしてみました。

ファイル容量は約200MB。思ったより容量少なかったです。(ダウンロードには小1時間かかったけど。。。)

僕は普段XAMPP環境でいろいろとアプリ制作しています。

C:/xampp/htdocs/ドメイン名/public_htmlへさっそくアクセスしてみたところ。。。

なるほど。Xserver仕様になっているのでそりゃそうですね。

WordPressの公式サイトからダウンロードして環境構築(成功)

ってことでおとなしく公式サイトからダウンロードしました。以下の記事が参考になります。

XAMPPを使ってWordPressローカル環境を構築する全手順

【WordPress】自作テーマ作成編

テーマのひな型作成

mythemeフォルダを作成し、フォルダの中に以下のファイルを入れます。

index.php・・・テンプレートファイル
style.css・・・デザイン
screenshot.jpg(880×660(px))・・・サムネイル用画像

テーマのアップロード

テーマフォルダをWordPress設置場所にある以下にアップロードします。

ドメイン名/public_html/wp-content/themes

WordPressの管理画面で外観>テーマを開くと追加されたテーマが確認できます。(サムネは適当です。すみません。。。)

有効化してトップページに行くと何も表示されない状態になります。

記事の出力

index.phpを以下のように編集。WordPressは専用のテンプレートタグがあります。

<! DOCTYPE html>

<html lang="ja>

<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> //CSS読み込み
</head>
//
<body <?php body_class(); ?>> //区別するためのクラス

<?php if(have_posts()): while(have_posts()): the_post(); ?> //ループ

<article <?php post_class(); ?>>　//区別するためのクラス

<h1><?php the_title(); ?></h1> //記事のタイトルを出力

<?php the_content(); ?> //記事の本文をを出力

</article>

<?php endwhile; endif; ?>　//ループ終了

</body>

</html>

以下のように表示されました◎

現状は、1記事しかないので見た目は変わりませんが、以下のようなURL構成になってます。

https://localhost/wordpress/　トップページ

https://localhost/wordpress/?p=1　記事毎の個別ページ

ソースコード。class名が沢山出力されています。ログインユーザーかどうかなどもここで判断しています。

データベース。投稿関連はwp_postsに保管されています。

デザインの反映

style.cssを以下のように編集

@charset "UTF-8";
/*
Theme Name: MY THEME (Chapter 2)
Author: TRAVEL SKETCH
Description: This is my original theme.
Version: 1.0
*/
body {
  margin: 0;
  font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif
  }
article h1 {
  margin: 0;
  font-size: 32px;
  font-weight: normal;
  color: blue;
  }

表示確認。反映されました。

外観>テーマエディターから編集もできました。ファイルを更新するとVScodeで編集していたファイルがリアルタイムで更新されるのでちょっと感動。笑

おわりに

とりあえず今日はこの辺で！

僕自身、なんとなくWordPressの仕組みが理解できてきました。

同じくオリジナルテーマ作成を目指す方の参考になれば幸いです。

コメントを残す

RECOMMENDこちらの記事も人気です。