WordPress利用「テーマ」の調べ方、Mac用テストサイト「MAMP」の利用

150703graphy

先日、negaposi.comを再構築した際に、WordPressの特に「デザイン」「ユーザーインターフェイス」面での作業過程をメモしておきます。

私の様な、なるべくできることは自分でやりたい・やらないといけない個人事業の方など向けです(笑)そうで無い方は、読み飛ばしてください!




(1)negaposi.comについて
(2)気になるテーマのチェック方法
(3)気になるテーマのテスト方法
(4)新しいテーマに変更




(1)negaposi.comについて

自サイト(negaposi.com)は、現在WordPressというブログシステムを利用しています。

WordPress自体は、基本的なことは無料で(開発をしてくださっている有志の方には本当に感謝)利用できるシステムで、
ページデザイン(見え方、記載項目、設置場所等)については有償・無償の「テーマ」をパーツの様に個別にインストールして、ページデザインだけどんどん変更して、試せるのです。

私がnegaposi.comを再構築した際に、WordPressの「テーマ」を20個近く試して、基本どのテーマを使って、自分で修正できそうか、できる余地があるか、を見ていきました。

結果、私の今回のサイト再構築の目的である、
・シンプルに「文章を読む」ことを目的としたデザイン
・私個人のプロフィール紹介ページも入れたい
・スマートフォンにも対応
という観点から、私の好みだったテーマは

「Graphy」by Takao Utsumi
https://ja.wordpress.org/themes/graphy/

でした。
いやもうシンプルさが、すごく私の好みで、殆どカスタマイズの必要なし!でした。感謝しております。

ちなみにこのページ一番下、フッターの
Powered by WordPress & Themegraphy
「Themegraphy」の部分をクリックすると、テーマを集めているサイトに飛べます。




(2)気になるテーマのチェック方法

自分でホームページ、wwwサイトを作成していた時代から、私は自分で一からソースを書くことはできないのでDreamweaverなどのホームページ作成ソフトを使うか、気に入ったサイトのHTMLを参考にしていました。

今回は、WordPress機能の中の「外観」=>「テーマ」=>「新規追加」から探す以外に、これは好みのサイトだな〜と思ったサイトのソースから「テーマ」を調べていきました。

ここ数年に作られたサイトは、殆ど何かしらWordPressの様なブログシステムを使っていると思って間違いないです。流行りがあるので、今後どうなるかは分かりませんが。

今回も、自分はまだ「模倣」からしか作れないので、先人の知恵をありがたくお借りしました。
「ソース」は、SafariやChromeなどのブラウザソフトで簡単に表示できます。
Chromeだったらページ上で「右クリック」「ページのソースを表示」です。

「ソース」を表示しても、WordPressの「テーマ」が何か分からない場合が多いので、その場合は下記サイトの方法を参考にしました。

参考サイト「ゼロからはじめるWordPress」
気になるWordPressサイトが使用しているテーマを見分ける方法
http://wp.8jimeyo.info/theme/miwakeru/

この方法で気になる「テーマ」が分かったら、検索して、ダウンロードできるページを探します。

さて、「テーマ」をインストールして、試そう!
と思ってもすぐに自サイトで試してしまうと、テスト段階で公開しているページデザインが変わってしまうし、プレビューだとちょっと不安…ということで、テスト環境をで試します!




3)気になるテーマのテスト方法

自サイトのデータは、レンタルサーバー上にあります。
最終的にはこの自サイトのWordPressに、気に入った「テーマ」をインストールして利用することになるのですが、気軽に沢山の「テーマ」を試したい!という場合、別途テスト環境を構築する必要があります。

150703manp

私の場合は、このテストに「MAMP」というサービスを利用しました。
https://www.mamp.info/en/
自分のMacにテストサーバー環境を作って、試したい「テーマ」や「プラグイン」をインストールしてチェックしてから、実際の自サイトに適用する、という訳です。

このサービスはFREEバージョンがありますが、ページは英語です。
が、下記の様な、親切な説明サイトがありますのでこちらを参考にして、準備します。

参考サイト「バズ部」
MAMPを使ってローカル環境にWordPressをインストールする方法
http://bazubu.com/how-to-insall-wp-in-mamp-23798.html

テストサーバー環境が「MAMP」で準備出来ましたら、気に入った「テーマ」をこちらの「MAMP」のテストサーバのWordPressにインストールしてから、色々といじり倒して、テストします。

ここをいじると、どう表示位置が変わるか、色が変わるか、表示内容が変わるか、等々。




(4)新しいテーマに変更

「MAMP」で試して、おし!この「テーマ」を使おう!と決まったら、いよいよ自サイトに導入します。

「MAMP」上でカスタマイズや環境設定を、本格的にすすめてしまった場合には、データベースをエクスポートして、自サイトに取り込んで、移行するという方法になると思います。
(「MAMP データ 移行」などで検索すると方法がわかると思います。)

私の場合は、複雑なサイトではなかったので、テスト環境で行った設定・過程をメモしておいてい、自サイトに「テーマ」をインストールしてから、もう一度設定を行いました。

私の場合は、「テーマ」の設定よりも、旧サイトのデータインポートの方が大変だったので…。

以上です!




規模の大きいサイトだとプロに任せてしまった方が、個人事業主としてもデザイン・コスト・作業時間からして、良い場合がありますが、negaposi.com程度だと、自分で十分できました。

今後ももっと気に入った「テーマ」が見つかったら、変更していきたいと思います!


コメントを残す