当ブログで利用のWordPressテーマ “Mag” をレビュー。カテゴリーが特化していないブログやサイトにおすすめ

当サイトではThemeforestで購入したWordpressテーマ “Mag” を利用しています。

WordPressテーマ Magの詳細はこちら

もともと、当ドメインにはWEBの仕事に関連した記事はなく、ロシア語、海外生活にWEB関連の記事がごちゃまぜになることは本当は嫌だったのですが、事情あって約2年ほど前に、二つ運営していたブログを一つにまとめることにしました。

その時の記事はこちら:ブログ統合のお知らせ

ただ、その時から、ブログのテーマが一貫していないことがとても気になっていました。WEB関連の記事を読んでくれた方のサイドバーのアクセスランキングにロシア語関連の記事が載っているのも変だし、トップページに来たと思ったら、WEBの記事とロシア語の記事と、さらに海外生活の話なんかがごちゃまぜになって時系列順に並んでいる…そんな当時のブログテーマには嫌気がさしていました。

それで何かいい方法はないか…と思って、思いついたのが、ブログ用のテーマを使うというより、ニュースサイトやWebマガジンに適したテーマを使うということです。

ニュースサイトでは、ありとあらゆるカテゴリーの記事が、毎日何記事も追加されます。そういうサイトでは、多くの場合、トップページはカテゴリーごとに分類して新着記事一覧を表示しています。個人ブログでも、同じように、カテゴリー別に新着記事やランキングを表示させることができれば、特定のカテゴリーに興味のある方がそのカテゴリーの情報を探しやすくなるわけです。

そういうわけで、私が使ってみることにしたのが、現在も使用中のWordpressテーマ “Mag” です。Magを選んだ時のポイントは、前述の「ニュースサイト」的な形でトップページを表示できるというののほかにも、以下のような理由がありました。

  • AMPプラグインに対応
  • デザインが気に入った
  • SNSシェアボタンプラグインを同梱
  • ビルダープラグイン(Visual Composer)を同梱
  • レスポンシブ対応
  • Themeforestで高評価

ブログを運営するうえでもはや必須なのがAMP対応ですね。AMPとは、Googleが推奨しているモバイル端末でのページ表示速度を高速化するための手法です。モバイルからのアクセスは特に、ページ表示に時間がかかるとすぐ閉じられてしまうという機会損失が起こりやすいので、ブログのAMP対応は重要です。実際、当ブログへのAMPページへのアクセスは全体の約半数に上ります。なので、AMPプラグインとの相性がいいWordpressテーマを使うことは個人的には一番重要なポイントでした。

その他にも、SNSのシェアボタン、フォローボタンを設置できるプラグインEasy Social Share Buttons)が同梱されているのも魅力です。このプラグインのいいところは、日本のSNSシェアでよく使われるLINE、Hatenaブックマーク、Pocketのシェアボタンが使えることです(といっても、その中のLINEしか今のところ使ってませんが…汗)。無料プラグインだとLINEとかHatenaとか、なかなか無かったり、あってもシェアボタンのデザインが微妙だったりするので、このプラグインは単体でも購入する価値があるくらいです。プラグイン単体で購入すると20$ですが、Magテーマには無料で同梱されていますので、お得ですね。

Easy Social Share Buttonsの詳細はこちら

あとは、おなじみのページビルダーVisual Composerも無料でテーマに同梱。記事内ではあまり使いませんが、トップページにはやはりビルダーがあると自由にレイアウトしやすいですし、各パーツの設定も楽です。

レスポンシブ対応はもはや当たり前ですが、やはりチェックしておきたいポイント。そして、テーマを販売しているThemeforestでのユーザ評価がよかったこと、定期的にアップデートがあること、デザインが個人的に気に入ったといったことも、Magを選んだ要素でした。

もちろん、Themeforestにはニュースマガジン系のWordpressテーマがたくさんありますので、機能面、デザイン面の両方で気に入るものを見つけてみてください。

ニュースマガジン系でよく売れているWordpressテーマはこちら

無料かつお洒落な海外発WordPressテーマ配布サイト3選

無料でお洒落なWordpressテーマを配布している海外サイトを3つご紹介します。

「wordpress theme free 2017 」というようなキーワードで検索すると、各種ブログやサイトがおススメ30選、50選などと詳しい説明・キャプチャ付きで紹介してくれてるですが、手あたり次第に「これいいな」と思ったものを詳しく見てみると、大抵同じデザインスタジオや会社が作っているテーマに行きついていることが多かったりします。

それだったら、最初から大元のデザイン会社のテーマ配布ページをブックマークしておけば、次に探すとき楽だな~と思い、この記事にまとめておくことにしました。

純国産のテーマもいいですが、海外発のテーマは種類も断然多いし、フリーなのにデザイン面でも優れているものがたくさんあります。(多すぎて全部チェックするのが大変なくらい?)

海外発の無料テーマを探すならまずは以下の3サイトをぜひチェックしてみてください。

 

使いやすさも抜群で様々な用途にしっくりくるデザインThemeGrill

無料テーマ配布ページ

ThemeGrillのテーマは以前サイト運営用に使ったことがあるのですが、無料版でも充実したカスタマイズ設定ができ、固定フロントページのレイアウトもウィジェットベースで簡単にきれいな構成でできるのが魅力でした。

シンプルでもちょっとした細部のデザインにこだわっていたり、何よりも見やすくて色んなカテゴリーのサイトに使いやすいデザインのテーマが多いです。管理画面側の使いやすさもおすすめポイント。

2017年版のベストWordpressテーマとして、ThemeGrillのFlashというテーマがいろんなところで紹介されています。ランディングページ、一般サイト、ブログ、ショップなど様々な用途に使えます。

SiteOrigin Page Builderプラグインに対応しており、ドラッグ&ドロップでページコンテンツを作っていけることや、フリー版でも11ものカスタムウィジェットが使えたり、スライダーが設定出来たりと、シンプルなサイト作成には充分な機能が備わっています。

Flashテーマのデモ・ダウンロード: https://demo.themegrill.com/flash/

 

 

洗練されたモダンなデザインATHEMES

ATHEMESが提供しているテーマは、ミニマルでモダンなデザインのものが多く、個人的には一番好みのテーマ配布サイトです。個人ブログやニュースサイト、ポートフォリオサイトにもいいし、ショップやビジネスサイト向けんテーマもあります。現時点で当ブログが使っているテーマもこのATHEMESの無料テーマの一つ。

無料テーマ配布ページ

 

ニュースサイト用のテーマGREATMAGが最近は色んなところで紹介されているのを見かけますが、。少し前はマルチパーパスのテーマSYDNEYもよく紹介されていました。

GREATMAGのデモ・ダウンロード

カテゴリーごとに新着情報を分類してトップページに表示できるニュースサイト向けのテーマですが、個人ブログでも使いやすそうなデザイン。

 

SYDNEYのデモ・ダウンロード

パララックス(視差)バックグラウンド画像や、スライダーなど、ランディングページが簡単に魅力的なものになる設定も可能。

 

様々なスタイルの良質な無料テーマを配布しているThemeIsle

「ThemeIlseのテーマは○○な感じです」と一言で言い表せないくらい、いろんなスタイルのテーマを配布しています。ポップなものからエレガントなもの、シンプルなもの、カッチリした感じのものなど、30ほどのテーマがダウンロードできるので自分の好みに合ったテーマを見つけやすそう。

管理画面側のデモも見ることができる(要登録)ので、気になったものは同時に使い勝手を試して見れるのもいい感じ。

無料テーマ配布ページ

 

中でもマテリアルデザインが特徴のHESTIAというテーマが最近のイチ押しのようです。

無料のPage Builderプラグインを使ってドラッグ&ドロップで組み立てられたり、WooCommerceにも対応しているなど、機能面でも充実しているのが魅力。メニューにアイコンが設定できたりメガメニュー対応だったりするところとかも、さりげなく充実しています。

HESTIAのデモ / ダウンロードはこちら

 

個人的にはAmadeusというブログ用テーマがいいなと思っています。モノトーンのシンプルなテーマですが、レイアウトとかちょっとした動きがオリジナリティがあっていいなと。

Amadeusのデモ /  ダウンロードはこちら

 

 

クオリティが保証された有料テーマサイトThemeforest

ちょっとした小規模サイトや個人ブログなら無料テーマで十分ですが、本格的なサイトを面倒なコーディングなしに作りたい場合は有料のテーマを使うのが早道かつ安心です。

ThemeforestのテーマはVisual ComposerやRevolution Sliderといった直感的にコンテンツを配置していけるプラグインとセットになっているものが多いので特におススメ。Visual Composer、Revolution Sliderは最初扱いに慣れるのに数日苦労するかもしれませんが、一度覚えてしまえば、デザイナーやサイト制作者の仕事をかなり楽にしてくれます。

テーマには数多くのデザイン済みのコンポーネント(パーツ)が用意されていますし、動きのあるスライダーやアニメーション、パララックス効果・アニメーションなども取り入れたりして、充実したサイトコンテンツを作っていけます。

ThemeforestのWordpress人気テーマ一覧

themeforestでWordPressテーマを選ぶときに必ずチェックしている6つのポイント

themeforestはHTMLサイトやWordpressなどのCMSで使えるデザイン性・クオリティの高い有料テンプレートの販売サイトです。Wordpressをそこそこ長く使っている人なら、一度は見たことのあるサイトだと思います。

WordPressで作るブログやサイトのデザインは無料で使えるテーマもたくさんあり、個人のブログでわざわざ有料テーマを使う必要はないかもしれません。

でも以下のような場合には、有料テーマの利用を考える価値があります。

  • 記事が多くなったブログをお洒落なニュースサイト風に見せたい
  • 企業のコーポレートサイトを素早くかつクオリティ高めで作りたい
  • オンラインショップを運営したい

特に単なるブログではなく、「ウェブサイト」である場合、そしてデザインや機能にある程度のクオリティが求められるようなサイトをつくるなら、無料テーマではなく品質が確保されたテーマを使用するのがベターです。

Webデザイナーに一から頼むよりはずっと安くできますしね。

themeforestで販売されているWordpressテーマの多くは、Visual Composerなどのページビルダープラグインが付いており、コーディングができなくても直感的にページのレイアウト作成やコンテンツ配置を行うことができるのも魅力です。
(ビルダーの扱いに慣れるのに2,3日苦戦するかもしれませんが・・・それを超えればとても楽々です)

でもthemeforestには非常に多くのWordpressテーマが販売されていて、いざ選ぼうとすると、どれがいいのか迷ってしまいます。

デザインが気に入ったからという理由だけで買うと、あとから「この機能が欲しかったのにない」とか「Wordpress本体のアップデートがされてテーマの機能がちゃんと使えなくなった」なんていうこともありえます。私もそういうのを選んでしまったことがありました。

そこで、今回は、私がthemeforestでテンプレート類(Wordpressテーマ、HTMLテンプレート*)を選ぶときに、後から失敗しないよう、必ずチェックしているポイントを上げてみたいと思います。

Themeforest サイトへ

*以下はWordpressテーマを選ぶことを前提として書いていますが、HTMLテンプレートを選ぶときにも大体当てはまりますので参考にしてみてください。

 

テーマの最終更新日と対応バージョン

更新日が半年前とかだと、Wordpress本体のアップデートに伴ってテーマが更新されていないことになります。それでも使えるテーマもあるのですが、更新がおろそかだと、何かあった時のサポートなどもあまり期待できませんし、動かない機能が出てきたりする可能性もあります。

最新更新日が1~2カ月以内で、Wordpress本体の最新バージョンに対応しているかは必ずチェックします。

またWordpress本体のバージョン、さらにオンラインショップを作る予定ならWooCommerceのプラグインバージョンも最新版に対応しているかも要チェックです。

 

購入者のレーティング、販売数

購入者の評価が高いことと、購入された数がそこそこあることは重要です。多くの人が使っていれば、当然今後もサポート、アップデートがしっかりされるでしょう。購入者が多いほうがレーティングにも信頼性がでます。

 

デモをよーく見てデザイン、コンポーネントをチェック

デザインと必要なコンポーネントがあるかどうかをチェックするには、デモをじっくり見てみることが重要です。

デモサイトでは以下の点にも注目しています。

  • ショートコードの中に自分が使いたいと思っているコンポーネント(パーツ)があるか。例えば価格表とか、アコーディオンとか、グラフとか。あるなら、デザインは気に入っているか。
  • 作成したいと思っているページの種類があるか。ランディングページ、ショップ、ギャラリーなど。
  • 段組みや、ボックス型、ワイド(Full Width)型など、レイアウトの選択肢に欲しいものがあるか。
  • 使えるアイコンフォントのデザインがどうか(意外とアイコンフォントのデザインでお洒落感がぐっと変わったりする)

 

含まれているプラグインに何があるか

ページビルダーやスライダーのビルダーが含まれているか。どのプラグインが使われているか。Visual Composer、Layer Sliderなど。

Visual Composerを独自に拡張している場合があるのですが、Wordpress本体のバージョンアップに伴って使えない機能が出たりすることがあるので注意です。購入者数がものすごく多ければいいですが、私はこういうのは選ばないことにしました。なぜかというと、Wordpress本体のアップデートでプラグインに不具合が出ると拡張版のアップデートと待つのが結構長くなることがある(最悪アップデートされないかも)からです(経験済み)。

 

多言語化プラグインに対応しているか

海外にいると多言語化が結構ポイントだったりするので。

 

どんなサイト向けのテーマか

多目的Multi Purposeなテーマはデザインバリエーションも豊富だが、デザインに余り自信がない人、デザインのカスタマイズに自信がない人は、逆に方向性を見失いやすいです。

もしサイトの目的が決まっているなら、その目的に合ったカテゴリーから選ぶとデザインが決まりやすいと思います。(不動産系、IT系、クリエイティブ系などのカテゴリで絞る)

 

以下はカテゴリ別の人気テーマ

ニュースサイトっぽく(記事の多いブログ)→ Newspaper

クリエイティブ系→ Bridge – Creative Multi-Purpose WordPress Theme

医療系→ MediCenter – Responsive Medical WordPress Theme

トラベル系→ Tour Package – WordPress Travel/Tour Theme

 

とにかくデモをしっかり見て、デザインが気に入り、かつ、そのテーマを使ったサイトのイメージが湧いてくれば候補に入れることにしています。最終的には、幾つか選んだ中から、前述の機能面と信頼度から一つに絞っています。

注意点: 表示されている価格は、1サイトに使うための価格です。テーマを複数のサイトに適用することはライセンス違反となるのでご注意ください。

ThemeForestへ

 

国産のテーマが安心、という方は…

英語だと何となく心配、国産テーマのほうが何かと安心、という方には、デザインプラスのテーマがおススメです。細部までのクオリティにこだわった美しいデザインがそろっています。(以下はほんの一例です)

コーポレートサイト用テーマ VeNus

WordPressテーマ「VENUS(TCD038)」

 

「縦書き」を美しく魅せる和風サイトテーマ KADAN

WordPressテーマ「KADAN(TCD056)」

デザインが秀逸で使いやすさもバッチリな無料Webサイト用WordPressテーマ10選

wpthemeこんにちは!今回はWordpressでブログではなくWebサイトを作りたいときに使える無料のテーマを集めてみました。

最近は「これが無料なの!?」と思うくらいデザインも機能もしっかりしているものが多いですよね、シンプルなWebサイトなら無料テーマを使ってベースの色やデザイン性の高い画像を使うだけで、結構格好いいサイトが簡単にできあがっちゃいます。もちろん、カスタマイズが得意な方なら、無料テーマをベースにCSSやHTML,PHPを調整するのもOK。自分の好みや使い道に合わせてチョイスしてみてください。全てレスポンシブ対応です。

 

汎用性の高いデザインSpacious

ThemegrillのWordpressテーマは無料なのにデザインもいいし、フロントページなどもすごく作りやすくて私も気に入っています。このSpaciousは爽やかで明るいデザインなので、コーポレートサイトから個人用まで色々な用途に使えそうです。

Screenshot of demo.themegrill.com

有料版はさらに機能が増えますが、無料版での機能は以下の通り。

  • イメージスライダー(4スライダーまで)
  • 4種類のレイアウト
  • ビジネステンプレート(フロントページ用)とコンタクトページ用の専用テンプレート
  • 13個のウィジェットエリア
  • 5つのカスタムウィジェット(ビジネステンプレート用)
  • ボックスタイプとワイドタイプの表示(コンテンツの幅)が選べる
  • スキンの選択(ライトまたはダーク)
  • ロゴ・ヘッダーテキスト、ヘッダーイメージの設定
  • カスタム背景(ボックスタイプの場合のみ)
  • メインカラーの設定
  • カスタムCSS対応
  • 2つのカスタムメニュー
  • 翻訳ファイル対応
  • 無料サポート(フォーラムでの質問OK)

これだけの機能があれば、カラーやレイアウト、スキンの調整などでWebサイトにオリジナルな雰囲気が出せそうですね。

 

シンプルなデザインEsteem

こちらもThemegrillからの無料テーマです。無駄なものがないシンプルなデザイン。

Screenshot of demo.themegrill.com

無料版での機能は以下の通り。

  • イメージスライダー(4スライダーまで)
  • 3種類のブログ用レイアウト
  • ビジネステンプレート(フロントページ用)とコンタクトページ用の専用テンプレート
  • 5つのカスタムウィジェット(ビジネステンプレート用)
  • ボックスタイプとワイドタイプの表示(コンテンツの幅)が選べる
  • ロゴ・ヘッダーテキスト、ヘッダーイメージの設定
  • カスタム背景(ボックスタイプの場合のみ)
  • メインカラーの設定
  • カスタムCSS対応
  • 翻訳ファイル対応
  • 無料サポート(フォーラムでの質問OK)

 

シンプルなデザインAccelarate

こちらもまたまたThemegrillのもの。このテーマは実際に使ってサイトを作ったことがありますが、カスタマイズもしやすいし、サクサク作れたのが記憶に残っています。

Screenshot of demo.themegrill.com

無料版での機能は以下の通り。

  • イメージスライダー(4スライダーまで)
  • 4種類のレイアウト
  • ビジネステンプレート(フロントページ用)
  • 5つのカスタムウィジェット(ビジネステンプレート用)
  • ボックスタイプとワイドタイプの表示が選べる
  • ヘッダーイメージの設定
  • カスタム背景(ボックスタイプの場合のみ)
  • メインカラーの設定
  • カスタムCSS対応
  • 2つのカスタムメニュー
  • 翻訳ファイル対応
  • 無料サポート(フォーラムでの質問OK)

 

さりげないパララックス&ワンページResponsiveBoat

パララックスがさりげないのがいい感じです。基本的な設定はオプションパネルで行え、HTML,PHPの知識がある方はカスタマイズもしやすいコード設計になっているとのこと。WooCommerceを使ったショップ作成にも対応。

responsiveboat

テーマの特徴

  • WooCommerce対応
  • ワン・ページタイプのサイト作成可能
  • スクロールでのパララックス効果
  • レスポンシブ
  • オプションパネルでのロゴ、ソーシャルリンク、カラー、レイアウトの設定
  • カスタマイズしやすいコード(HTML, PHP)

 

さりげないパララックス&ワンページZerif Lite

こちらもResponsiveBoatと同じThemeisleからのテーマ。同様にパララックスがさりげないのがいい感じです。こちらのほうがよりオフィシャルな感じのサイトを作れそう。

Screenshot of themeisle.com

テーマの特徴

  • WooCommerce対応
  • ワン・ページタイプのサイト作成可能
  • スクロールでのパララックス効果
  • レスポンシブ
  • オプションパネルでのロゴ、ソーシャルリンク、カラー、レイアウトの設定
  • カスタマイズしやすいコード(HTML, PHP)

 

左サイドのメニューがお洒落Blackwell

左側に表示されるメニューがワンページタイプのサイトに一味違った雰囲気を出しています。ボタンクリックでメニューの表示・非表示が切り替えられるタイプ。

website-with-sidebar

テーマの特徴

  • 左サイドのメニュー(表示切替可)
  • ワンページタイプのサイト作成可能
  • パララックス効果
  • イメージスライダー
  • レスポンシブ

 

ふわっとした雰囲気のArise

トップイメージとグローバルメニューの配置に一工夫あっていい感じ。全体的に柔らかい雰囲気のサイトが作れそうです。

デモ・ダウンロード

Screenshot of demo.themefreesia.com

 

シンプルで落ち着いた雰囲気Opportune

色合いに落ち着きがあってシンプルでもスタイリッシュな雰囲気があります。テンプレートにあるようなインテリア関係のサイトに向いていそうです。

デモ・ダウンロード

Screenshot of demos.shapedpixels.com

 

デザインに一捻りありなMT-TWO

ページのWHAT WE OFFERSのところがあまり見ないタイプの配置で個人的にかなり気に入りました。ギャラリー、ワークフローなどのパーツも魅力的です。

mt

テーマの特徴

  • What we offerのスタイル2種類
  • ポートフォリオあり
  • カラフルなチームセクション作成
  • SEOフレンドリー
  • レスポンシブ対応
  • ドキュメンテーションあり

 

ワンページタイプのサイトを初めて作るならオススメStarter

その名の通り、な感じですが、デザインは最近流行りのよくあるタイプですが、ギャラリーの写真をクリックしてLightbox風に表示されるなど、ちょっとした細かいところがちゃんと作られているのがいいと思います。

Screenshot of demo.themeum.com

BootstrapをWordPressテーマに組み込んでレスポンシブ対応のナビゲーションメニューにする方法

wp-bootstrap-navこの記事ではWordpressのテーマを自作する際に、Bootstrapフレームワークを使ってナビゲーションメニューをレスポンシブ対応させるための設定について書いています。

WordPressではナビゲーションメニューを動的に作成してくれるテンプレートタグwp_nav_menu()がありますが、これとBootstrapの組み合わせ方について具体的なコードの書き方の例を載せてみました。

 

用意するもの

まずは以下のファイルをそれぞれダウンロード。(jQueryやBootstrapをCDNからの読み込みにしている場合はnavwalkerのみダウンロード)

jQuery

jQueryはBoostrapを動かすために必須なので、まだテーマに組み込んでいない場合はダウンロードする。上のリンクから公式サイトに行って「Download the compressed, production jQuery 1.11.3」のリンクをクリック。ダウンロードしたファイルを自分のテーマのjsフォルダに入れておく。

 

Bootstrap

Boostrapをまだ組み込んでいない場合は上のリンクからダウンロード。ダウンロード後、zipファイルを解凍してbootstrap.min.cssとbootstrap.min.jsを自分のテーマのcss,jsフォルダにそれぞれ入れておく。

 

Bootstrap navwalker

ナビゲーションメニューを表示させるwp_nav_menu()タグにBoostrapを組み込むためのクラス。上のリンクからダウンロードし、wp_bootstrap_navwalker.phpをテーマフォルダに入れておく。

 

function.phpに記述すること

 

header.phpに記述すること

headタグ内に以下のタグを記述してBootstrapのCSSファイルを読み込み。

 

bodyタグ内、ヘッダーのナビゲーションメニューを表示させたい部分に以下のコードを記述する。

 

wp_nav_menu()のパラメータのmenu_classの部分は、Bootstrapで用意されているクラスを記述している。fallback_cbとwalkerのところは上記のとおりに記述。その他は適宜変更してOK。

具体的なパラメータの設定方法については以下を参照

テンプレートタグ/wp nav menu

 

footer.phpに記述すること

Bootstrapのjsファイルの読み込み。

 

出力されるHTMLタグの例

以下のようなHTMLタグが出力される。

 

HTMLサイトをWordPressに移行する手順のまとめ ‐ その2

前回はHTMLサイトをWordpressに移行するための作業の前半部分、既存のHTMLファイルからベースとなるWordpressテーマを作るところまでの流れをざっと書きました。

ここからは肝心な作り込みに入っていきます。今回も自分の覚書風に書いていくので分かりにくいところがあるかと思います。もしあまりに意味不明だったり、間違ってるよ?というところがあったらコメントあるいはお問い合わせからご連絡いただけると嬉しいです。

では早速、後半の作業に入っていきます!

大まかな流れ

ここからはHTMLサイトを公開状態にしたまま、裏でWordpress版のサイトを作成していく。そしてWordpress版が完成したところで切り替え作業を行い、Wordpress版のサイトを公開する。

前提条件としては、以下のような環境で移行作業を進めて行く。

  • 独自ドメイン(or 独自ドメインのサブドメイン)でHTMLサイトを運営
  • WordPressインストールが可能なサーバーを利用している

サーバーにWordpressをインストールし、前回の作業で作成したテーマをアップロード。サーバー上で作り込み&デバッグ作業をガンガン進めていく。

 

ローカルで作り込んでからサーバーにアップしたい場合は、以下の作業のX~Xまでをローカル環境に構築したWordpressで行い、最後にサーバーにアップする。

ローカル環境の作成やサーバーへのアップまでのフローで参考になるサイトはこちら

XAMPPでローカル環境構築 インストールからWordPressの設置までやってみる。

XAMPPを使ってローカル環境にWordPressをインストールする方法

 

WordPressをサーバーにインストールする

HTMLサイトを運営しているサーバーにWordpressをインストール。
このとき、HTMLサイトのファイル類が置かれているディレクトリ直下ではなく、サブディレクトリを作成してインストールするのがポイント。

例)abc.comというサイトの直ディレクトリがabcの場合、abcディレクトリ直下にはHTMLサイトのファイル類やフォルダ類が保存されている。このabcディレクトリの中にサブディレクトリ(wp)を作成し、その中にWordpressをインストールする。

www
∟abc
∟ index.html
∟about.html
∟contact.html
∟ ….html
∟cssフォルダ
∟jsフォルダ
∟imagesフォルダ
wpフォルダ (←ここにWordpressをインストールする)

 

WordPressのレンタルサーバへのインストール方法

インストールが完了したら、独自ドメイン/wp/にアクセスして、Wordpressの初期テーマでのトップページが表示されることを確認する。

今後は
独自ドメイン/wp/ (例: http://abc.com/wp/ )
からWordpressのサイトを参照しつつ、作り込みを進めて行く。

※厳密には独自ドメイン/wp/のURLを直打ちすれば一般の人もアクセスできてしまうが、個人レベルのサイトやブログではその可能性は限りなく0に近いという前提で進める。もし完全に外から見られないようにしたい場合は、ローカルで作り込むか、.htaccessでアクセス制限をする必要がある。

 

wp-config.phpをデバッグモードにする

ここからの作業では何らかのエラーが発生することが多々あるが、この時に原因がつかめないと先に進めない。

デフォルトの状態ではデバッグモードがオフになっていて、エラーが発生すると、作成中のWordpressサイトにアクセスしても真っ白なページが表示されるだけ、ということがしょっちゅうあるので、デバッグモードをオンにする。

そうすると、エラーの原因とエラーが発生しているテンプレートファイル(と行番号)を教えてくれるので解決しやすい!

WordPressをインストールしたフォルダ(この記事ではwpフォルダとする)にFTPでアクセスし、wpフォルダ直下のwp-config.phpを見つけてローカルにダウンロードする。

ファイルを開くと以下のような場所があるので、falseをtrueに変更し、ファイルを再アップロード。

define(‘WP_DEBUG’, false);

define(‘WP_DEBUG’, true);

 

テーマをアップロードする

前回の作業で作っておいたWordpressテーマをアップロードする。

ダッシュボードから 外観>テーマ にアクセスし、ファイルのアップロード画面からzipファイル形式でアップロードする。

 

サイトを作る場合は固定フロントページの設定を

デフォルトではindex.phpがトップページとして表示されるようになっている。ブログの場合はこれでOKだが、サイトの場合は、front-page.phpがトップページとして読み込まれるように設定したい。

この場合は、以下のように固定フロントページの設定を行う。
1.トップページとブログページ用にダミーの固定ページを作成する(空ページでOK。タイトルも適当に)
2.ダッシュボードから 設定>表示設定 の「フロントページの表示」の設定で、固定ページを選択し、フロントページ、投稿ページそれぞれに1で作成しておいた固定ページを選択する。

これでトップページの表示にはfront-page.phpが読み込まれるはず!

 

PHPファイルの記述の誤りを修正していく

まずは基本となる以下のファイルの作り込みを完了させることが先決

  • front-page.php
  • index.php
  • single.php

そして上記のファイルで読み込む以下のテンプレートファイルも確認&修正をする

  • header.php
  • footer.php
  • sidebar.php

※header.phpやfooter.phpではcssやjsファイルの読み込み設定があるが、そのファイルのパスがちゃんと通っているかなども確認する。

※サイトのトップページ(front-page.php)は、画像スライダーがあったり、新着情報の表示欄があったりと、少しカスタマイズが必要なことが多いので、まずはindex.phpとsingle.phpの方から手を付けるのがおススメ。

 

index.phpとsingle.phpは基本となるループが正しく書けていれば、あとはそんなに難しくない。記事のタイトルやリンク、サムネイル画像、コンテンツを動的に読み込むための関数に誤りがないかの確認(&修正)や、レイアウトの調整などをここで進めて行く。

この辺りはWordpressのテーマを自作したことがある人は楽々だが、そうでない場合は、まずテーマの自作方法を解説している以下の記事を参考にしながら作り上げるのが良い。

WordPress オリジナルテーマの作り方

HTMLからWPテーマを作成する

テーマの作成

※前回のテーマを作る段階でも、同じような手順があったけれど、ここでは表示を確認しながらミスなく作り上げていくことが重要。

 

フロントページについて

フロントページは、新着記事の表示など、動的に読み込む必要があるところは、サブループ(WP_Query())と呼ばれるループを使う。このあたりについては以下の記事を参考に。

WordPress ループの基本

WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット

ちょいちょい忘れる『WP_Query』の使い方

 

フロントページの静的な部分は、ウィジェットであとから内容を変えられるように切り分けてもいいし、今後そうそう変更する予定もない、という場合は、リンク部分だけ以下のように変更しておけば取りあえずOK。

 

CSSの調整もここで同時に進めて見た目を整えていく。

 

残りのテンプレートファイル(page.php、archive.phpなどの作成)

index.phpとsingle.phpが出来上がったら、これらをベースにpage.phpやarchive.phpなど、必要なテンプレートファイルを作っていく。

index.phpをベースに作成するとよいテンプレート

  • archive.php
  • taxonomy.php
  • category.php
  • search.php

など。

single.phpをベースに作成するテンプレート

  • page.php
    404.php

など。

テンプレート階層を参照し、自分のサイトに必要になるものを作成する。

 

パーマリンク設定

ここはHTMLサイトから移行する場合、結構大事なところなのでよく考えて設定する。

HTMLサイトからWordpressサイトになると、URLが変わってしまう可能性がある。301リダイレクトで旧URLから新URLへアクセスを転送することはできるが、URLが変わるのを最小限に抑えたい場合は以下の方法を取る。

1.ページや投稿のスラッグをもとのHTMLサイトのスラッグと合わせる

例えば、http://abc.com/contact.html という問い合わせページがあったとしたら、Wordpressでも固定ページで問い合わせページを作る際にcontactというスラッグにする。

2.パーマリンク設定で、URLの最後に.htmlが付くようにする。

ダッシュボードの設定>パーマリンク設定で、カスタム構造を選択し、入力欄に「/%postname%.html」と入力する。

ただし、固定ページは別途functions.phpのほうで以下のコードを記述しないと.htmlが付かないので注意。

 

上の方法で合わせられない部分も出てくると思うが、その場合は301リダイレクトの設定をする(後述)。

 

コンテンツの作成・メニューやウィジェットなど

このあたりは作業が前後するかもしれないが、ページの作成やメニューの作成、サイドバーのウィジェットの作成なども順次行っていく。
HTMLサイトから必要なテキストや画像素材などをWordpressサイトのほうに移していく感覚で。

  • 各ページのコンテンツ⇒固定ページで作成
  • ナビゲーションメニュー⇒メニューで作成
  • サイドバーやフッターのコンテンツ⇒ウィジェットで作成

 

基本的なプラグインの導入

ここまでくると元のHTMLサイトと同じものがWordpressでできあがっているはず。なので、必要なプラグインの設定などを進めて行く。

導入プラグインのおススメリストはコチラ

 

全体的な動作確認

変な動きをしたりしないか、色んなページにアクセスしたりリンクをクリックしたりして確認する。

 

wp-config.phpをデバッグモードをオフに

動作確認が終わったらデバッグモードをオフにする

 

トップページをhtmlからwordpressに切り替える作業

いよいよ切り替え作業。一応メンテナンスモードにして、アクセスが少なくなる時間帯に切り替え作業を行うのがベター。

「工事中」「準備中」「メンテナンス中」呼び方は色々ですが、ページの公開を一時的に中止したいときに便利なプラグイン WP Maintenance Mode

これまでは独自ドメイン/wp/へのアクセスでWordpressのサイトが表示されていたが、独自ドメインのみでWordpressサイトが表示されるように設定する。やり方は以下の記事を参考に。

WordPressでサイトのトップページURLにドメインだけが表示されるように設定する方法

HTMLサイトのファイル・フォルダ類はひとまず削除せず、適当なフォルダを作って移動させる。(移行後少し経つまでは削除しないほうが何かの時に困らないかも?)

無事Wordpress版のサイトが表示されればOK!

リダイレクト設定(必要な場合)

プラグインSimple 301 Redirecsを使用すると便利。

Simple 301 Redirectsプラグインの使い方

 

 

 

本当に自分にしか分からない覚書風になってますが、最後までご覧くださりありがとうございました!

何かのヒントになれば嬉しいです。ではまた!

HTMLサイトをWordPressに移行する手順のまとめーその1

こんにちは!最近、HTMLサイトをWordpressに移行するという作業を何回か行う機会がありました。立て続けに同じような作業を行っていたので、だいぶ流れも覚えられたのですが、ちょっと時間が経ったらきっと色々忘れてしまうだろう・・・ということで、HTMLサイトからWordpressへの移行の手順についてまとめてみました。

自分の備忘録的な感じで書いたので、分かりにくいところも多々あると思いますが、何かのヒントになれば・・・。もし間違っているところや質問などあったらぜひコメント欄からご連絡いただけると嬉しいです!

HTMLサイトのコピーをローカルに作成

サーバーからローカルにコピー。バージョン管理システムなどを使っていない場合は、バックアップ用にzipファイル化しておくと万が一の時に解凍して元に戻せる。

 

HTMLファイルを整理する

HTMLファイルの中で同じような構成のページ(内容が違うだけ)のものは一つを残し、あとは別フォルダに移動する(あとで使うファイルやフォルダもあるので削除はしない)。

例えば、

  • トップページ
  • 会社概要
  • お問い合わせ
  • 製品一覧ページ
    • 製品情報ページ1
    • 製品情報ページ2
    • 製品情報ページ3
  • ブログ記事一覧
    • ブログ記事1
    • ブログ記事2
    • ブログ記事3

というような構成のサイトの場合、製品情報ページ1~3やブログ記事1~3は内容が違うだけでHTMLの構成はほぼ同じはずなので、製品情報ページ1のhtmlファイルのみを残す。ブログ記事も同様にブログ記事1のhtmlファイルのみを残す。

 

HTMLファイルとWordpressテンプレートとの対応を考える

WordPressテンプレート階層を参考に、HTMLサイトのページがそれぞれ、どのWordpressテンプレートで対応できるかを考える。

例えば、前述の例の場合、

  • トップページ ⇒ フロントページ(front-page.php)
  • 会社概要 ⇒ 固定ページ(page.php)
  • 問い合わせ ⇒ 固定ページ(page.php)
  • 製品カタログ ⇒ カスタムテンプレートファイル または archive-カスタム投稿タイプ.php
  • 製品情報 ⇒ 固定ページ(page.php) または single-カスタム投稿タイプ.php
  • ブログ ⇒ インデックス(index.php)
  • ブログ個別記事 ⇒ 個別投稿記事(single.php)

 

注意点1: トップページに使うのはhome.phpかfront-page.phpか

WordPressでブログではなくサイトを作成する場合、トップページはindex.phpにならないのでhome.phpかfront-page.phpを用意する必要があります。個人的にはフロントページをいつも使用。index.phpとhome.php、front-page.phpの違いや使い分けについては以下のサイトで確認。

WordPressで困惑しがちなindex.phpとhome.phpとfront-page.phpの違い

 

注意点2: 製品カタログ(製品一覧)と製品情報のページの作り方

幾つか考えられる方法があるので、サイトに適したものを選ぶ。

製品カタログと製品情報ページを両方固定ページで作成

カスタム投稿タイプの作成がいらないのでその分、簡単。製品の数が少ない場合はこれで十分いけそう。この場合、カタログ(一覧)ページは、通常の固定ページで作るとなると、新しい製品を追加したり、古い情報を削除するたびに、カタログの内容を手動で編集しなくてはいけない。が、これは専用にテンプレート(カスタムテンプレートファイル)を作成すればok。

具体的には、

製品カタログ(親ページ)

―製品情報1(製品カタログの子ページ)

―製品情報2(製品カタログの子ページ)

―製品情報3(製品カタログの子ページ)

という風に固定ページの親子関係を指定しておき、製品カタログ用に、子ページの一覧を取得して表示するテンプレートを作成する。こうすれば、子ページが増えたり減ったりしても、カタログを編集することなく最新の情報で表示できる。

このあたりのやり方は以下のサイトが参考になりそう。

WordPressで親ページに子ページの一覧を表示する方法

 

製品情報をカスタム投稿で作る

より本格的なのがこっち。クライアントさんのほうで情報を追加・更新したいなどの要望がある場合は、カスタム投稿タイプを使って他の固定ページやブログ投稿と分けてあげるほうが分かりやすい。

例えば、製品情報(product)というカスタム投稿タイプを作成する場合、single-product.phpを用意すると、製品情報ページの表示の際は、このファイルを読み込んでくれる。(single-product.phpがない場合はsingle.phpで代用されます)

この場合、カタログ(製品一覧)は、専用のアーカイブページ(archive-product.php)を用意してもいいし、archive.phpやindex.phpので代用してもOK。あるいは、固定ページで、カスタム投稿タイプ一覧を取得して表示する専用のテンプレート(カスタムテンプレート)を用意するのもあり。

カスタム投稿タイプの具体的な使い方については以下のサイトが参考になっています。

 

カスタム投稿タイプの一覧ページ作成で参考になるサイト:

カスタム投稿タイプの一覧ページの作成

カスタム投稿タイプのアーカイブページを作成する

 

カスタム投稿タイプを一から設定するのに参考になるサイト:

WordPressのカスタム投稿(ポスト)タイプを作成するまでの手順リスト

 

カスタム投稿タイプとカスタムタクソノミーを初めて使う時に参考にしたいサイト:

カスタム投稿タイプとカスタムタクソノミーまとめ

 

WordPressテーマの基本的なファイルを作成

いよいよWordpressのテーマファイルにhtml内のコードを移行していく。まず、Wordpressテーマ用のフォルダをローカルに作成します。フォルダ名はテーマ名に合わせる(例えばnomadというテーマ名にする場合は、nomadという名前のフォルダに。)

いちばん基本的な以下のphpファイルとスタイルシートをフォルダ内に作成しておく。空ファイルでOKなので、以下に挙げる通りのファイル名で一通りファイルを作成!

 

共通部分のパーツファイル

  • header.php :ヘッダー部分
  • footer.php :フッター部分
  • sidebar.php :サイドバー部分

HTMLサイトでは基本、ヘッダーからフッターまで一つのファイルに記述していたものが、Wordpressでは幾つかのパーツごとにファイルを分けてコードを記述できる。ヘッダーやフッター、サイドバーのコードがそれぞれパーツ化されることで、メンテナンスもグッとしやすくなるのはありがたいですね^^

 

基本となるテンプレートファイル

  • index.php :ブログ投稿の一覧を表示させるテンプレート
  • front-page.php :サイトのトップページのテンプレート
  • single.php :個別投稿記事のテンプレート

これらのファイルに、header.php、footer.php、sidebar.phpを読み込む設定をし、それ以外のコンテンツ部分のコードを記述する。ちなみに、index.php、single.phpをある程度作り込んでからarchive.phpやpage.phpなどを作る方がラクなので、まずは上記のテンプレートファイルだけ作成していけばOK。

 

WordPressテーマに必須の二つのファイル

  • functions.php :関数を定義
  • style.css :スタイルを定義

functions.phpには、もともとのWordpressの設定を変更したり、拡張したりするための関数を記述するファイル。何も書かなくてもいいけど、このファイル自体が存在しないとWordpressテーマとして認識してもらえないのでファイルは必要。絶対何か記述する必要はでてきますけど^^;

style.cssにはCSSを記述し、他のphpファイルと同じ階層に配置しておきます。(cssフォルダ内とかに配置するのはNG)

 

 

ちょっと寄り道

実はWordpressテーマには、index.phpとfunctions.php、style.cssさえあればテーマとしては成り立ちます。なので例えば一枚モノのサイトを作るときは最低限の三つのファイルだけでもいいわけですよね。でもたいていの場合は、パーツを共通化したほうが便利だったり、ページによってレイアウトやデザインを変えたいはずです。私もまだまだですが、テンプレート階層をちゃんと意識して、必要なところは切り分けたり、別のテンプレートを使ったりと、サイトの構成に合わせてテンプレートファイルを用意していくのが良さそうですね。

テンプレート階層

 

元のHTMLファイルをパーツ化しWordpressテンプレートファイルに移行

WordPressに必要な基本ファイルが用意できたところで、HTMLファイルの内容を各phpファイルに移していく。

まずは何も編集せず、htmlファイルからphpファイルに該当する部分をコピペするだけ。例えば、以下のようなhtmlの場合には、こんな風にパーツごとにコピペしていく。

 

header.php

DOCTYPE宣言から始まって、<head></head>の部分、そしてサイトのヘッダータイトル、ナビゲーションメニュー部分まで。

上の例で言うと

の部分。

 

footer.php

サイトのフッター部分から最後の</body></html>まで。

 

sidebar.php

コンテンツのサイドバー部分。上の例だと、section#content内のsidebarのdiv。

 

残りの部分

で、残った部分のコードを、トップページのhtmlならfront-page.phpにコピペ、記事のhtmlならsingle.phpにコピペする。そして、ヘッダー、フッター、サイドバーがあったところを以下のようなコードに置き換える。

 

htmlの一部をphpコードに置き換える

htmlではサイトのタイトル名や読み込むcssやjavascriptのファイルの場所を直に書いていたが、Wordpressの場合、phpで動的に取得する。

一例をあげると、ヘッダー部分はこんな感じ。

<? php … ?>のコードに置き換わっている部分が動的に読み込まれる。

header.php、footer.php、sidebar.php、index.php、single.phpのコードの置き換えには、以下のサイトの解説が非常に分かりやすい。オリジナルテーマを作る手順の解説ですが、ベースとなるhtmlを作成してからそれをwordpress化するという方法で解説されているので、ループの部分なども含めて見ながらやるとラク!

WordPressオリジナルテーマの作り方

※front-page.phpの解説は上のサイトにはありませんがひとまずコンテンツ部分は編集しなくてもOKです。

 

 

style.cssとfunctions.php

style.cssの始めには必ずテーマの名前を設定する必要がある。以下のコードをコピペ。Theme Nameは必ず指定すること。他は必要な部分の情報を設定。

 

functions.phpによく使うコード。必要な部分をコピペして使う。

 

WordPressテーマをzip化し、アップロード

htmlサイトのほうで使っていたcss、js、imagesなどのフォルダ類を、この作業の最初の方で別フォルダに取り分けておいたところから移してくる。ただし、imagesフォルダには、サイトのデザインに関係した素材ファイルのみを移動させ、コンテンツに使う写真や画像ファイルなどは含めない。

HTMLサイトのトップページのスクリーンショットを撮って、screenshot.pngという名前でWordpressテーマフォルダ内に保存。

以下のファイルやフォルダ類が揃っていることを確認する。

  • header.php
  • footer.php
  • sidebar.php
  • index.php
  • front-page.php
  • single.php
  • functions.php
  • style.css
  • cssフォルダ
  • jsフォルダ
  • imagesフォルダ
  • fontフォルダ(あれば)
  • screenshot.png

 

確認できたら、zipファイルに圧縮。ここまででWordpressテーマづくりは一息^^

残りは、phpの処理の記述の間違いなどもあるかもしれない(というか必ずある!)が、そういったものは、WordPressにテーマをインストールしてからデバッグしていく。

 

この後の作業をリストアップ

ちょっと長くなってしまったので、Wordpressをインストールしてテーマをアップロードした後の手順は次回の記事にまとめます。残りの作業としては

  • WordPressのインストール(まだの場合)
  • テーマのアップロード
  • wp-config.phpをデバッグモードにする
  • PHPファイルの記述の誤りを修正していく
  • 残りのテンプレートファイル(page.php、archive.phpなどの作成)
  • メニューやウィジェットの作成
  • front-pageの編集
  • 基本的なプラグインの導入
  • パーマリンク設定
  • コンテンツの作成
  • 全体的な動作確認
  • リダイレクト設定(必要な場合)
  • wp-config.phpをデバッグモードをオフに
  • htmlからwordpressにトップページを切り替え

といった作業が残りのタスク。これらについて注意点や参考になるサイトなども含め次回まとめたいと思います。

WordPressテーマ(zipファイル)をインストールする方法―賢威テーマを例に.

この記事では、zipファイル形式のWordpressテーマをインストールする方法について解説します。

WordPressのテーマはダッシュボードの「外観」>「テーマ」から検索してインストールすることもできますが、今回はダッシュボード経由ではなく、様々なサイトで配布されているWordpressテーマをダウンロードした場合のインストール手順を説明していきます。「賢威」テーマを利用する方は、サポートサイトからダウンロードする部分も図解したので参考にしてみてください。

WordPressテーマファイルを用意する

まずはWordpressテーマをダウンロードサイトからダウンロードしてください。zip形式でダウンロードされるはずですが、解凍はしないでOKです。

 

賢威テーマを利用する場合

まずは賢威のサポートページにログインします。すると、右上のほうに「ダウンロード」というボックスがあります。その中から「賢威テンプレート」のリンクをクリックします。

賢威6.2と大きく書かれたページが開かれたら、少しスクロールダウンして

「賢威6.2 テンプレート(HTML or WordPress)」をダウンロードする

というリンクをクリックしてください。新しいページにテンプレートメーカーが表示されます。

 

左側のテンプレートメーカーメニューから必要な情報を選択していきます。

賢威テンプレートダウンロード1

  • テンプレートの種類: WordPressテンプレートを選択します
  • テンプレートのデザイン: 好きなものを選びましょう

 

賢威テンプレートダウンロード2

  • サイトの幅: 特にこだわりがなければ初期設定のままでOKです。
  • ロゴタイプ: ロゴに画像を使いたい場合は「画像」を選択してファイルをアップロードします。

 

賢威テンプレートダウンロード3

  • 細かな配色設定: 初期設定の色を変えたい場合はここで選択しなおすことができます。

 

以上の設定が終わったら「ダウンロードする」ボタンをクリックしましょう。zip形式のテーマがダウンロードされます。

 

テーマをWordpressダッシュボードからインストールする

ダッシュボードで 外観 > テーマ を開きます。「新規追加」をクリックします。

Wordpressテーマインストール1

 

 

「テーマのアップロード」をクリック。

Wordpressテーマインストール2

 

 

中央の「ファイルを選択」をクリックしてダウンロードしておいたzip形式のテーマファイルを選択するか、下の画像のように、「ファイルを選択」のところにzipファイルをドラッグ&ドロップします。

すると「今すぐインストール」がクリックできるようになるのでクリックします。

Wordpressテーマインストール2

 

 

アップロードが完了すると下のような表示になります。「有効化」をクリックします。

Wordpressテーマインストール4

 

 

以上でWordpressテーマのインストールは完了です。

ダッシュボードの左上のサイトタイトルのところにカーソルを合わせると「サイトを表示」というメニューがひょこっと現れますのでクリックして、インストールしたテーマを確認してみましょう^^

Wordpressサイト表示