gomymobi.com: 知識ベース
ウェブサイトのテーマを作成/変換する方法
- 基本的に、ウェブサイトのテーマは標準的なHTMLテンプレートですが、HTML要素を編集可能にするために私たちが開発した小さなJavaScript(HTML Builder)が埋め込まれています。したがって、任意のHTMLテンプレートをウェブサイトに変換することができます。
- このチュートリアルでは、HTML Builderでウェブサイトテーマを作成する簡単な手順を紹介します。
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
Watch quick video to create a website theme
1. HTMLビルダーを読み込む
- 各HTMLファイルの最後に、HTML Builderを読み込むためのコードを追加する必要があります。
<script id="GMM-Editable-HTML-Builder" type="text/javascript" src="/app/GMM-Editable-HTML-Builder/core.init.min.js"></script>
id="GMM-Editable-HTML-Builder"
必要であり、変更することはできません
- クローン可能な要素のオーバーレイ幅を変更したい場合は、属性 data-gmm-clonable-width
このスクリプトタグでは許容される値はピクセルまたはパーセンテージです。
2. ウェブサイトのトラフィックを追跡するスクリプトを追加する
- ウェブサイトのトラフィックをトラッキングするには、各ウェブページで以下のコードを埋め込む必要があります head
タグ。
<script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>
3. ページ全体のルートコンテナを設定する
- ルートコンテナは required HTML Builderによって、ページ内のすべての要素の構造を決定します。デフォルトでは、 body
ルートコンテナとして自動的に設定されます。
- もちろん、このルートコンテナを他の内部タグに変更することもできます。 class="GMM_editable_sortable_container"
所望の要素に変換する。
注意 各ページには1つのルートコンテナのみがあります
4. ドラッグアンドドロップによるソート可能な要素の作成
- ページの埋め込みルートコンテナの後に、ドラッグアンドドロップ機能を使用して要素をソートするには、 class="GMM_editable_sortable"
これらの望ましい要素に変換する。
- 編集可能なツールバーの位置を設定するには、属性 data-gmm-toolbar-position
要素に許容値: top, botom
- 覚えている: GMM_editable_sortable
子クラスの "GMM_editable_sortable_container
.
5. 内部ドラッグアンドドロップソート可能な要素
- 各子供に GMM_editable_sortable
、あなたはまだ子供をドラッグアンドドロップのソート可能な要素に変換することができます。 class="GMM_sortable_custom"
属性付き data-gmm-sortable-handle=".GMM_sortable_handler"
ソート可能な親と追加する class="GMM_sortable_handler"
カスタムソート可能な親の各子に送信します。
- これらのクラスでは、ドラッグアンドドロップでソート可能な要素を無制限に持つことができます。
6. クローン可能な要素を作る
- いくつかの要素にクローン可能なフィーチャを与えるために、 class="GMM_clonable_object"
それに。
- 注意:属性の値を設定する data-gmm-clonable-width
クローンレイヤーのオーバーレイ幅を変更する必要がある場合。
7. カスタムの編集可能な要素を作成する
- デフォルトでは、HTML Builderはすべての一般的なHTMLタグを自動的に検出して編集可能な要素に変換します。彼らです: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'iframe', 'a', 'button', 'img', 'i.fa', 'span.fa', 'p', 'span', 'em', 'address', 'video'
.
- ただし、カスタムHTMLタグを編集可能な要素に簡単に変換するには、その名前を $theme_settings['Editable_Tags']
に theme-settings.php
ファイル。
終わり
- はい、それはあなたがHTMLテンプレートをウェブサイトのテーマに変換するために理解する必要があるすべての情報です、それは非常に簡単で簡単です!
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
- Please follow our example to master these details..