はじめに-内容の要約-
オリジナルテーマを導入するとう事だけに焦点をあててお話をすると、オリジナルテーマがすごく単純で簡単な作業だという事をお伝えしたいと思います。
スポンサードリンク

この記事は約4分32秒で読めます。

余談ですが、僕が本格的なブログ運営をはじめて1年3ヶ月程になりますが、いつの間にかたくさんのブロガーさんに囲まれながらブログ発信をしているように感じます。
僕自身、なかなか思うようにブログ継続ができておらず、継続ブロガーさんには感心させられっぱなしなのですが、せめてウェブクリエイターとしての活動しているうえで、デザインや仕組みだけでもブログに個性を持たせたいと思ったのが、オリジナルテーマ制作に向き合うきっかけとなりました。

実は、めちゃ簡単なオリジナルテーマの導入。

今回話題にしているオリジナルテーマの導入に関してですが、僕のオリジナルテーマとしてWordpressのプラットフォームに認識してもらう為に一番はじめにやっている作業をご紹介致します。

WordPressのオリジナルテーマの導入だなんて、めちゃくちゃ難しそうですね。
ITに疎いので、私にはハードルが高すぎて、絶対無理です、ごめんなさ~い(汗)。

そこまで否定しなくても(笑)、実は、かみ砕いて説明してしまえば、めちゃくちゃ簡単な事なんですよ。きっと苦手とか難しいという先入観のせいかもしれませんね(笑)。

はじめに用意した今後必要になるだろうファイル達。

まず、はじめにオリジナルテーマとして、Wordpressに読み込ませる必要なファイルを用意致しました。
オリジナルテーマの導入だけの場合では、下記ほとんどがなくても、テーマとして認識されるのですが、どうせなら必要になるだろうファイルを予め用意しておきました。現時点ではファイルの中身は白紙です(笑)。
それぞれのファイル名に対する役割に関しては、また今後、詳しく説明したいと思います。

  • archive.php
  • category.php
  • footer.php
  • front-page.php
  • function.php
  • header.php
  • index.php
  • page.php
  • screenshot.png
  • sigle.php
  • style.php

上記、のリストのファイルを一つのフォルダにまとめて「themes-made → themes-made.zip」という風にフォルダをzipへと圧縮してインストールの準備完了です。

フォルダの中身のイメージは上記のような感じになります。

テーマをインストールする為に必要な最低限のファイル。

ついさきほど、今後の為にということもあり、色々ファイルや画像を用意致しましたが、オリジナルテーマのインストールまでと限定したお話でありますが、
最低限に必要なテーマのファイルイメージ
このように他のファイルはなくても「style.css」に必要項目さえ記載してあればオリジナルテーマとしてインストール可能です。
「style.css」ファイルの中身に下記のような文言を書いておくだけで大丈夫なので、とりあえず、という人がいれば一度試してみてください。

@charset "UTF-8";
/*
Theme Name: huma works 
Theme URI: http://www.huma-works.com/
Description: huma worksブログはお洒落なほうがいいに決まっている。
Version: 1.0
Author: huma-works
Author URI: http://www.huma-works.com/
*/


あ~やっぱり難しいじゃないですかぁ~(涙)。もぅ~。

よく中身を見て下さい。単に英単語に対しての説明を書いているだけですよ(笑)。
Theme Nameはテーマの名前。Descriptionは単にブログの説明でAuthorはそれを作った著者などですよ(笑)。

あらま、本当ですね。取り乱してしまいました(恥)
用意するのはこれだけでいいんですか?

他にも色々明記できるものは存在しているのですが、とりあえず、シンプルにこれだけでスタートしていきます。この文言をコピーして自分用に書き換えれば十分です。
必要に応じて随時追記していけばいいと思います。

テーマのサムネイルの登録について補足。

補足というほどではないのですが、Wordpressでテーマを設定した際にサムネイルが表示されていると思いますが、オリジナルテーマ制作する際もサムネイルがあった方がテンションが上がります。
配布となればブランディングとしては必須だと思いますが、自分で使う分には、なくてもいいのかもしれませんが、あったほうが、やっぱり良いですよね。

あるときとない時、比べて見てもわかるように、あったほうが良いです、この画面は、今の時点では自分しか見る事がない為、ほぼ自己満足ですが(笑)

こやって比べて見ると、あったほうがかっこいいですね。
でも自己満足レベルならデザイン作業に時間がかかるのであれば、後回しでもよさそうですね。

オリジナルテーマをインストールする手順について。

ここからは、オリジナルテーマフォルダ「themes-made」をワードプレスの管理画面にインストールする手順をスクリーンショットを使って簡単に解説致します。

1.管理画面の左側のメニューを開きます。

2.メニューの「外観」項目をクリックします。

3.外観の中の「テーマ」項目をクリックします。

4.現在インストールしているテーマの一覧が表示されます。その上の「新規追加」のボタンをクリックします。

5.続いて「テーマのアップロード」ボタンを押して、予め用意した圧縮済のファイルを選択します。

6.予め用意していたテーマの圧縮済のフォルダ「themes-made」を読み込みます。

7.対象のフォルダを保存している場所から選択してアップロードしましょう。

8.テーマのフォルダ名が間違いなければ「インストールボタン」を押しましょう。

9.フォルダに不備がなければインストール完了の文字が出てきます。

ちゃんとテーマとして反映されました。
ま、今の段階で中身は白紙なので、ブログに訪問しても何も映らない白いページになりますが(笑)。
導入するという事だけに焦点を絞れば、オリジナルテーマを導入できたという事になりますね(汗)。

白紙のオリジナルテーマですね。
特徴は「何も表示される事は、ありません」です的な・・。
少し無理がありますね(汗)。

そりゃそうですよね(笑)。
ま、あとは中身にコードさえ入れておけばオリジナルテーマになるという事なので、まずは第一歩前進ですね。

オリジナルテーマ制作のデモページへのリンクです。

実際のオリジナルテーマは下記URLにて作業したものをこのブログで紹介しています。(※進捗によりこちらのブログの内容よりも進んでいる場合もありますので、予めご了承下さい。)

それでは、また次回お会いしましょう。

スポンサードリンク

運営はハマワークスです。

ハマワークスとしての主な仕事の軸として、ネットショップやウェブサイトを利用する事で。モノやサービスを「作る人」そして「それを求める人」をつなぐかけはしとして存在できるよう日々実践と研究を積み重ねています。そして、自ら築き上げたノウハウや経験を元に、お客様をサポートできるよう日々努力を重ねています。

自己紹介カテゴリー

大阪で活動するウェブクリエイターのハマワークスの公式ウェブサイトです。ブログからECサイトまでお客様のサービスを広めるお手伝い致します。

© ハマワークス公式サイト | ウェブクリエイターの仕事のあしあと.