ライブWordPressテーマをリアルタイムでカスタマイズしてみませんか? さて、CSSHeroは簡単な方法で変更を加えるためのプラグインです

公開: 2016-04-07

CCSHeroによるライブのWordPressテーマを簡単にカスタマイズ

WordPressはCMSフレームワークであり、カスタマイズが豊富で、開発者がテーマやプラグインを変更するために使用できる一連のAPIとフックを提供します。 これが、現在、WordPress公式リポジトリから利用可能な何千ものプラグインからプラグインを選択するオプションがある理由です。

この投稿では、新しいプラグインCSSHeroについて詳細に説明します。 しかし、始める前に、 these questionsに焦点を当てましょう。

  • WordPressサイトにmake live changes方法は?
  • テーマはリアルタイムで変わりますか?
  • WordPressテーマのCSSプロパティの数を知る簡単な方法はありますか?
  • リアルタイムプレビューでWordPressブログを編集する
  • ライブになる前にWordPressテーマをカスタマイズする

上記の質問のいずれかがある場合は、適切な場所にいます。

プラグインwithout any helpに自分でライブ変更を行いたい場合は、事前に~300 of CSS propertiesを知っておく必要があります。 ライブテーマモードで実際の変更を確認するためにそれらを変更することは、一種の不可能です。 WordPress customizerを使用すると、すべてではなく一部のプロパティを変更できます。これが私たちの本当の問題です。

私たちは2つのオプションがあると思います:

オプション-1)CSSの変更を手動で実行する

  • Chrome / Mozillaでブログを開きます
  • ヘッダー、投稿、画像などのCSS要素を右クリックします
  • [ Inspect ]をクリックして、CSSプロパティを確認します
  • 効果を確認するために変更を加える
  • 問題がなければ–テーマのstyle.cssファイルに移動して変更を保存します
  • プロセスを複数回繰り返します

オプション-2)機能が組み込まれたプラグインを使用します。この場合はCSSHeroです。

  • エディターを使用してlive siteで変更を実行する
  • ライブ結果を見る
  • [ Save buttonをクリックするとdoneです

CSSHeroはCrunchifyと共同で、Crunchifyリーダーに10 free Licensesを提供します。 記入するこのグーグルフォームあなたの名前をリストアップします。 –プレゼントは終了しました

CSSHeroをインストールして、WordPressテーマのライブ変更を実行しましょう

NOTE :この投稿の下部にある完全なビデオをチェックアウトしてください。

ステップ1

なぜCSSHeroなのか? CSSHeroはpremium WordPressプラグインです。 基本ライセンスは$29/siteから始まります。 私は言うでしょう-あなたが初心者または専門家であるならば、それは試す価値があります。 30 daysの返金保証が付いています。

コードCRUNCHIFYを使用すると、スタータープランで34% off 、プロプランで40% offになります。

ライセンスを登録し、ダッシュボードからCSSHero pluginの最新バージョンをダウンロードします: http ://www.csshero.org/

WordPress用のCSSHeroプラグインをダウンロード

ステップ2

  • WordPress管理パネルからインストールしてアクティブ化します
  • アクティベーション時にKeyを要求します
  • Get my Key Now! ボタンをクリックすると、ライセンスキーのあるページが開きます
  • [ Get Licenseをクリックすると、すべて設定されます

CSSヒーローライセンスページを取得する

ポイント-1)機能を始めましょう

  • 次に、ブログhome pageに移動すると、 top right上隅にCSSHeroアニメーションボタンが表示されます。
  • それをクリックすると、プラグインはあなたのテーマで動作するcontrol panelをロードします

CSSHero optionsを含む以下のgifを見てください。

CSSHeroオプションパネル

ポイント-2)CSSHeroテーマエディタオプション

theme editorのアイデアは、シンプルなビジュアルエディターでtheme's styleを変更することです。 CSSHeroテーマエディタの助けを借りて、変更することができます

  • ヘッダーテキスト
  • フォント
  • 国境
  • スタイルなど

同じことが当てはまります

  • ボディコンテンツ
  • エントリーポスト
  • メタ値
  • ヘッダー値
  • フッター
  • サイドバーなど。以下のGIFをご覧ください。

CSSHeroHTMLプロパティの変更UIをチェックアウトします

ポイント-3)シングルクリックの便利なデバイスレイアウトオプション

下の画像にあるように、テーマエディタには、マウスホバーとシングルクリックだけで、テーマのさまざまなモバイル、iPhone、iPad Layoutsの数をチェックアウトするオプションがあります。

さまざまなモバイルレイアウトをチェックアウト

ポイント-4)最近の変更を元に戻す方法は?

ユーザーには、単純なChange historyモジュールを使用して最近のすべての変更を元に戻すオプションがあります。 確かに、少なくとも私ではなく、開発者の誰もが最初の試みで正しく物事を成し遂げることはありません:)。 これは私にとって非常に便利です。

CSSHeroはall of your save changesを表示する非常に便利なモジュールも提供します。 timelineに戻って、以前のバージョンに戻すことができます。 それは便利なツールではありませんか? 私はこれまで何度もこのツールを使用していて、それを愛しています。

チェックアウト変更履歴

ポイント-5)設定とツールオプション

Preset SettingsTools Options

アカウントまたはローカルの変更からすべての変更をロードします

すべての設定をリセットオプション

CSSHeroカスタムCSSエディタープラグインのすべての機能を示す、キャプチャした詳細なビデオをご覧ください。

詳細なYoutubeビデオ:

すべての機能を確認したので、次の質問をします:)。

ポイント-6)このプラグインは私のテーマで動作しますか?

公式CSSHeroサイトからの情報によると、プラグインは以下のすべてのWordPressテーマフレームワークで動作します。

  • ジェネシスフレームワーク
  • GeneratePress
  • LayersWP
  • 最後通牒のテーマ
  • 合計
  • 前払い
  • WPブートストラップ
  • テーマ別
  • 必須+基礎
  • オメガ
  • ページラインDMS

テーマisn't compatible場合でも、 no worriesはいりません。 Rocket modeを有効にするオプションが表示されます。

Messageこのテーマのネイティブサポートはありません。 ロケットモードの自動検出を試してみませんか? enable it CSS again変更してみると、上のビデオで見たのと同じオプションが表示されます。

CSSHeroはRocketModeを有効にします

ポイント-7)プラグインのサポートとドキュメントはどうですか?

Gravity Forms、WooCommerce、Contact Form7、WP Poolsなどの人気のあるWordPressプラグインのいくつかは、CSSHeroフレームワークと互換性があります。

つまり、CSSHeroはtheme customizationだけでなく、 plugin layout customizationでも機能します。

大事なことを言い忘れましたが、公式サイトには、あなたが読むことができる詳細なtips and tricksの記事がたくさんあります。

CSSHeroの非常に優れたドキュメントとサポート

私が考えることができるOnly Consは、すべての機能に精通することです。 あなたが始めてプロになるには少し時間がかかるかもしれません。 CSSHeroに慣れたら、すべてのWordPressブロガーにとってvery handy solutionになると確信しています。

宣伝したいと思う製品、プラグイン、テーマなどがある場合は、私たちに連絡してください。

CSSHeroのCrunchify限定ディールは次のとおりです。

CSSHeroクーポンコードが40%オフ-CRUNCHIFY

こんにちはCrunchifyリーダー–

CSSHero WordPressテーマカスタマイズプラグインがup-to 40% offになることをお知らせします。

以下の手順をご覧ください

ステップ1

  • サイトCSSHeroに移動します: https ://www.csshero.org/
  • Pricing Plansのリンクをクリックします

ステップ2

  • ボタンI have a coupon code

ステップ-3

  • クーポンコードを入力してください: CRUNCHIFY

コードCRUNCHIFYを追加すると、CSSHeroが最大40%オフになります

ステップ-4

  • スタータープランとパーソナルプランを34% offにするには、[利用]ボタンをクリックします
  • プロプランで40% off

CSSHeroテーマエディタープラグインとCrunchifyExclusiveDealコード-CRUNCHIFY

すべての取引のリスト: https://crunchify.com/deals/