ドラッグ&ドロップでカスタマイズ可!多機能WordPressテーマ – Themify

thumb_themify

WordPress、使ってますか?今や世界中で愛されているCMSですが、元々ブログ用CMSなだけあって、ブログ以外のサイトでは扱いにくく感じている人もいるかと思います。そこで!今回はドラッグ&ドロップでコンテンツの追加やレイアウトの変更ができちゃう素敵テーマを扱っているThemifyをご紹介します!

Themifyとは?

themify
Themifyはカスタマイズ性を重視したWordPressテーマの販売サイト。無料テーマもいくつか配布しています。

クオリティの高いテーマの数々

運営者は海外の人気Webデザイン系ブログ「Web Designer Wall」の中の人で、彼のデザインへのこだわりを色濃く反映したハイクオリティなデザインのテーマが盛りだくさん!

parallax
例えばポートフォリオサイトとして人気のテーマ、「Parallax」では大きな背景画像とフェードイン・アウトする動きが特徴。背景画像次第でいろんな雰囲気を演出できそう。

postline
Postline」はタイムライン形式の少し変わったレイアウトが印象的です。

ドラッグ&ドロップでカスタマイズ


先日追加された「Builder」機能では、各コンテンツをドラッグ&ドロップで追加することができます。追加できるモジュールは

  • テキスト
  • 地図
  • メニュー
  • 画像
  • スライダー
  • タブ
  • 動画
  • 記事一覧
  • ギャラリー
  • アコーディオン

などなど。

Themifyカスタムパネル

Themifyカスタムパネルの画像
どのテーマにもダッシュボードに「Themifyカスタムパネル」が追加されます。ここから主に以下の設定変更が可能です。

  • オリジナルファビコン
  • レイアウト
  • ソーシャルリンク
  • フォントスタイル
  • 背景色・画像
  • ロゴ画像
  • カスタムCSS
  • スキンの変更

Themifyテーマをインストール

まずは実際に試してみましょう!いろんなテーマが用意されていますが、Builderの機能をわかりやすく説明するため、とってもシンプルな「Basic」テーマを例に紹介していきます。このテーマは無料なので「Download」ボタンをクリックするとそのままダウンロードできます。
ダウンロードしたテーマファイルを themes フォルダー内に起き、ダッシュボード > 外観 > テーマ から有効化してください。

日本語化

Basicテーマ用の日本語ファイルを用意しました。ダッシュボード内やBuilder機能の言語テキストは基本的に同じものなので、他テーマでも(ある程度は)日本語が反映されると思います。ja.mo ファイルをテーマフォルダーの languages 内に置いてください。

ダウンロード

Builder機能

さっそくページを作ってみましょう。まずはダッシュボード > 固定ページ > 新規追加 で新しく「ホーム」ページを作成します。コンテンツ部分は何も書かず、とりあえず「公開」。このページをホームに設定するので、設定 > 表示設定 > フロントページの表示 で固定ページにチェックを入れ、フロントページを先ほど作成した「ホーム」を選択します。

ThemifyでWordPressページをカスタマイズ
サイトを見るとこんな感じ。まだ何もないです。コメント欄が表示されてしまう人は ダッシュボード左側の「Basic」(にこちゃんマーク) > 設定 > レイアウト > デフォルト固定ページレイアウト にある「すべてのページでコメント欄を非表示」にチェックしておきましょう。

「Thimify Builder」にカーソルをあわせ、Builderをオン
画面上の黒いバーにある「Thimify Builder」にカーソルをあわせ、Builderをオンにすると…

WordPressフロントページにモジュールが出現
画面下に各モジュールが出現!

「スライダー」モジュールをドロップ
「ここにモジュールをドロップ」と書かれた四角の中にモジュールをドロップしてカスタマイズしていきます。「スライダー」モジュールをドロップすると、こんなオプション設定画面が表示されました。「画像」にチェックを入れて画像を追加します。サイズやレイアウトなどを設定し、保存すると…

スライダーが追加されています
スライダーが追加されています!すごい!

WordPressフロントページでカラム調整
縦のラインを左右に動かしてカラム数の変更もできます。

新規作成した列の左側に動画を、右側に地図のモジュールを追加
動画や地図を追加してみました。

Themify レイアウト
この他、まだまだ紹介しきれないほどのモジュールてんこ盛り!Builderのデモページではたくさんのレイアウト案が紹介されています!どんなサイトにも合わせられそうですねー!

ショートコード

Themifyでは上記モジュールをショートコードでも表示できます。ドラッグ&ドロップよりコードを書きたい派なあなたはぜひ使ってみてください。Builderのモジュールパネルで用意されているオプションも記述できます。

ショートコードはオプションも合わせるととにかく種類が多いので、公式サイトのドキュメントをご覧ください。

また、ショートコードはBuilderのテキストモジュールやテキストウィジェットでも動作します。つまり、レイアウトはBuilderで組んで、モジュールはショートコードで記述することも可能。

サンプルコンテンツ

すべてのテーマに「sample-content.xml」というファイルがついています。こちらはテーマのサンプルデータで、インポートするとデモサイトと同じコンテンツを反映させることができます。インポート手順はとっても簡単。

  1. ダッシュボード > ツール > インポート
  2. 「WordPress」をクリック(インポート用プラグインをインストールするよう言われたらインストールしてください)
  3. sample-content.xml をアップロード
  4. 添付ファイルもダウンロード・インポートするか聞かれるので、デモサイトで使われている画像も必要な場合はチェック
  5. 完了したらフロントページへ。無事反映されているはず!

でも、お高いんでしょう?

  • シングルテーマ($49) – テーマ毎に課金
  • Themifyクラブ($79) – テーマ使い放題

どちらも1年間のサポートとテーマアップデートがついています。1年以上使いたい場合は更新必須。更新には同額がかかります。無料テーマも用意されており、そちらの利用は料金がかかりません。ただし、サポートやアップデートはできません。

シングルテーマプランだと、1つのテーマを購入するともう1つテーマが無料でゲットできます。つまり実質$49で2つのテーマを入手できます!これは本当にお買い得!いろんなテーマを試したい方はThemifyクラブプランがおすすめです。

詳しくはThemifyの料金表ページをご覧ください。

実は私、Themifyの制作チームに参加してるんです!

以前書いた「とあるフリーランスWebデザイナーの一日」で世界各国の制作チームメンバーと働いている事を書きましたが、それが今回紹介しているThemifyのチームです。少し前からWebデザイナー・フロントエンドデベロッパーとして参加しています。いつ言おういつ言おう思って書いてたらこんな下の方になっちゃった。。

ということで…

20%オフ!期限なしのクーポンコード!

購入時にクーポンコード「HELLOMANA」を入力すると、20%の割引となります!多くのクーポンコードには有効期限が設定されていますが、このクーポンコードは無期限!いつでもお気軽にお使いください ;)

Themifyでは有料テーマだけでなく、無料のテーマもありますので、まずはテストも兼ねて上記でも紹介した Basic テーマなどで動作テストをしてみてください。気に入ってくださると嬉しいです!

※テーマに関する質問はThemifyメンバー限定のコンテンツとなっているため、コメント欄や私宛のメールではお答えできません。予めご了承ください。

シェアする

コメント

  • Pingback: 独習メモ()

  • Pingback: themifyとかいうのを入れてみる。()

  • satosaku

    初めまして。

    Wordpress初心者です。

    Themifyの記事を読んで、使ってみようと思いインストールしましたが、

    記事にあるような画面上の黒いバーにある「Thimify Builder」が出ていません。

    どうしてでしょうか?

  • ありがとうございます。
    「Themify Builder」で編集可能なページのみ表示されます。例のように新規ページを作成し、そのページをホームとして設定していない限りはホームで「Themify Builder」と表示されません。ご確認ください。

  • satosaku

    お返事ありがとうございます。出てきましたヽ(^o^)丿
    まだまだ分からないことだらけですが、こつこつやりたいと思います。

  • tatata

    いつも魅力ある記事の投稿、ありがとうございます!
    Themifyを早速インストールして使用しております。

    スライダーが特に気になるので触ってみたのですが、
    画像をアップロードしても実際にサイトに表示されません。
    これはメディアライブラリから選択しても反映されません。

    これはどう対応すればいいでしょうか。
    ご教示お願いします。

  • manekineko

    いつも参考にさせていただいております。こちらのThemifyでPSDファイル付というものは、Photoshopでつくったデフォルトのバナーデザインが付いているということでしょうか?すみません、おしえてください(◡‿◡。)

  • バナーデザイン?というのはなんだろう…(; ・`д・´)
    ホームやブログ記事などのPhotoshopで作ったデザインファイルですー!

  • manekineko

    ご回答ありがとうございます、わかりました!!使ってみようと思います!!ありがとうございました!!

  • maron

    いつも参考になる記事が多くありがとうございます。

    Themify(スタンダードクラブプラン)を早速購入しました。

    サンプルコンテンツについて教えていただきたいのですが

    記事通り

    ——————————————————————————–

    「sample-content.xml」というファイルがついています。こちらはテーマのサンプルデータで、インポートするとデモサイトと同じコンテンツを反映させることができます。インポート手順はとっても簡単。

    ダッシュボード > ツール > インポート

    「WordPress」をクリック(インポート用プラグインをインストールするよう言われたらインストールしてください)

    sample-content.xml をアップロード

    添付ファイルもダウンロード・インポートするか聞かれるので、デモサイトで使われている画像も必要な場合はチェック

    完了したらフロントページへ。無事反映されているはず!

    ——————————————————————————–

    「sample-content.xml」

    Import Attachments

    □Download and import file attachments

    にチェックを入れダウンロードしても

    デモサイトで使われている画像が表示されず、ダミー画像が表示されます。

    なぜでしょうか?

    ※YouTubeのビデオは表示されます。

    また、サンプルコンテンツを削除する方法を教えていただけませんか。

  • ご購入ありがとうございます。
    申し訳ございませんが、記載の通りテーマに関する質問はThemifyメンバー限定のコンテンツとなっているため、コメント欄ではお答えできません。Themifyサイトよりログインいただき、サポートページをご覧いただくか、 http://webcreatorbox.com/contact よりご連絡ください。
    (直接Themifyのサイトをご覧いただくか、お問い合わせいただいた方が早いです)

    サンプルコンテンツは通常のコンテンツと同じく投稿された状態で表示されているので、投稿>投稿一覧 で消去したいコンテンツを選択し、セレクトメニューから「ゴミ箱へ移動」を選択して適用させてください。

  • まなや

    早速
    Themify basic を試しました。

    1ヶ月チョッとぶりにWPへインしたら

    「Thimify Builder」にカーソルをあわせ、Builderをオン にしても無反応になっていました。

    basicごと入れなおしたのですが同じでした。

    このテーマは
    期限付きなのでしょうか。。。

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)