ライブWordPressテーマをリアルタイムでカスタマイズしてみませんか? さて、CSSHeroは簡単な方法で変更を加えるためのプラグインです
公開: 2016-04-07WordPressは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/
ステップ2
- WordPress管理パネルからインストールしてアクティブ化します
- アクティベーション時に
Key
を要求します Get my Key Now!
ボタンをクリックすると、ライセンスキーのあるページが開きます- [
Get License
をクリックすると、すべて設定されます
ポイント-1)機能を始めましょう
- 次に、ブログ
home page
に移動すると、top right
上隅にCSSHeroアニメーションボタンが表示されます。 - それをクリックすると、プラグインはあなたのテーマで動作する
control panel
をロードします
CSSHero options
を含む以下のgifを見てください。
ポイント-2)CSSHeroテーマエディタオプション
theme editor
のアイデアは、シンプルなビジュアルエディターでtheme's style
を変更することです。 CSSHeroテーマエディタの助けを借りて、変更することができます
- ヘッダーテキスト
- フォント
- 国境
- スタイルなど
同じことが当てはまります
- ボディコンテンツ
- エントリーポスト
- メタ値
- ヘッダー値
- フッター
- サイドバーなど。以下のGIFをご覧ください。
ポイント-3)シングルクリックの便利なデバイスレイアウトオプション
下の画像にあるように、テーマエディタには、マウスホバーとシングルクリックだけで、テーマのさまざまなモバイル、iPhone、iPad Layouts
の数をチェックアウトするオプションがあります。
ポイント-4)最近の変更を元に戻す方法は?
ユーザーには、単純なChange history
モジュールを使用して最近のすべての変更を元に戻すオプションがあります。 確かに、少なくとも私ではなく、開発者の誰もが最初の試みで正しく物事を成し遂げることはありません:)。 これは私にとって非常に便利です。

CSSHeroはall of your save changes
を表示する非常に便利なモジュールも提供します。 timeline
に戻って、以前のバージョンに戻すことができます。 それは便利なツールではありませんか? 私はこれまで何度もこのツールを使用していて、それを愛しています。
ポイント-5)設定とツールオプション
Preset Settings
とTools Options
。
CSSHero
カスタムCSSエディタープラグインのすべての機能を示す、キャプチャした詳細なビデオをご覧ください。
詳細なYoutubeビデオ:
すべての機能を確認したので、次の質問をします:)。
ポイント-6)このプラグインは私のテーマで動作しますか?
公式CSSHeroサイトからの情報によると、プラグインは以下のすべてのWordPressテーマフレームワークで動作します。
- ジェネシスフレームワーク
- GeneratePress
- LayersWP
- 最後通牒のテーマ
- 合計
- 前払い
- WPブートストラップ
- テーマ別
- 必須+基礎
- オメガ
- ページラインDMS
テーマisn't compatible
場合でも、 no worries
はいりません。 Rocket mode
を有効にするオプションが表示されます。
Message
:このテーマのネイティブサポートはありません。 ロケットモードの自動検出を試してみませんか? enable it
CSS again
変更してみると、上のビデオで見たのと同じオプションが表示されます。

ポイント-7)プラグインのサポートとドキュメントはどうですか?
Gravity Forms、WooCommerce、Contact Form7、WP Poolsなどの人気のあるWordPressプラグインのいくつかは、CSSHeroフレームワークと互換性があります。
つまり、CSSHeroはtheme customization
だけでなく、 plugin layout customization
でも機能します。
大事なことを言い忘れましたが、公式サイトには、あなたが読むことができる詳細なtips and tricks
の記事がたくさんあります。
私が考えることができるOnly Cons
は、すべての機能に精通することです。 あなたが始めてプロになるには少し時間がかかるかもしれません。 CSSHeroに慣れたら、すべてのWordPressブロガーにとってvery handy solution
になると確信しています。
宣伝したいと思う製品、プラグイン、テーマなどがある場合は、私たちに連絡してください。
CSSHeroのCrunchify限定ディールは次のとおりです。
こんにちはCrunchifyリーダー–
CSSHero WordPressテーマカスタマイズプラグインがup-to 40% off
になることをお知らせします。
以下の手順をご覧ください
ステップ1
- サイトCSSHeroに移動します: https ://www.csshero.org/
-
Pricing Plans
のリンクをクリックします
ステップ2
- ボタン
I have a coupon code
ステップ-3
- クーポンコードを入力してください:
CRUNCHIFY
ステップ-4
- スタータープランとパーソナルプランを
34% off
にするには、[利用]ボタンをクリックします - プロプランで
40% off
すべての取引のリスト: https://crunchify.com/deals/