gomymobi.com: ฐานความรู้
วิธีการสร้าง / แปลงรูปแบบของเว็บไซต์
- โดยทั่วไปรูปแบบของเว็บไซต์เป็นเพียงแม่แบบ HTML มาตรฐาน แต่มันก็เป็น embeded JavaScript ที่ (สร้าง HTML) ขนาดเล็กที่พัฒนาโดยเราจะทำให้องค์ประกอบ HTML ทั้งหมดที่สามารถแก้ไขได้ ดังนั้นคุณอาจแปลง HTML แม่แบบใด ๆ ไปยังเว็บไซต์
- ในการกวดวิชานี้เราจะแสดงให้คุณทำตามขั้นตอนที่ง่ายมากในการสร้างรูปแบบของเว็บไซต์ที่มีการสร้าง HTML ของเรา
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
Watch quick video to create a website theme
1. โหลด HTML Builder
- ในด้านล่างของแต่ละไฟล์ 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"
ที่จำเป็นและไม่สามารถเปลี่ยนแปลงได้
- หากคุณต้องการที่จะเปลี่ยนความกว้างซ้อนทับขององค์ประกอบ clonable เพิ่มแอตทริบิวต์ data-gmm-clonable-width
สำหรับแท็กสคริปต์นี้ ค่าที่ยอมรับได้อยู่ในพิกเซลหรือเปอร์เซ็นต์
2. เพิ่มสคริปต์เพื่อติดตามการเข้าชมเว็บไซต์
- ในการติดตามการเข้าชมเว็บไซต์ในแต่ละหน้าเว็บที่คุณจะต้องฝังโค้ดด้านล่างลงใน head
แท็ก
<script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>
3. ตั้งภาชนะรากทั้งหน้า
- ภาชนะราก required โดยผู้สร้าง HTML เพื่อตรวจสอบโครงสร้างขององค์ประกอบทั้งหมดในหน้าเว็บ โดยค่าเริ่มต้น, body
ถูกกำหนดให้เป็นภาชนะรากโดยอัตโนมัติ
- เห็นได้ชัดว่าคุณยังอาจมีการเปลี่ยนแปลงภาชนะรากนี้ไปยังแท็กด้านอื่น ๆ โดยการเพิ่ม class="GMM_editable_sortable_container"
ไปยังองค์ประกอบที่พึงประสงค์
ข้อควรระวัง แต่ละหน้ามีภาชนะราก 1 เท่านั้น
4. ทำให้การลากและวางองค์ประกอบการจัดเรียง
- หลังจากภาชนะรากฝังตัวสำหรับหน้าในการสั่งซื้อการจัดเรียงองค์ประกอบโดยใช้คุณลักษณะการลาก n หล่นคุณจะต้องเพิ่ม 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. ทำให้องค์ประกอบ clonable
- เพื่อที่จะให้องค์ประกอบบางคุณลักษณะ clonable เพิ่ม class="GMM_clonable_object"
กับมัน
- จำ: ค่าที่ตั้งไว้สำหรับแอตทริบิวต์ data-gmm-clonable-width
ถ้าคุณจำเป็นต้องเปลี่ยนความกว้างของชั้นซ้อนทับโคลน
7. ทำให้องค์ประกอบที่กำหนดเองที่สามารถแก้ไขได้
- โดยค่าเริ่มต้น HTML Builder จะตรวจสอบโดยอัตโนมัติและแปลงแท็กทั้งหมดทั่วไปกับองค์ประกอบที่สามารถแก้ไขได้ พวกเขาคือ: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'iframe', 'a', 'button', 'img', 'i.fa', 'span.fa', 'p', 'span', 'em', 'address', 'video'
.
- แต่คุณได้อย่างง่ายดายอาจแปลงแท็กที่กำหนดเองใด ๆ กับองค์ประกอบที่สามารถแก้ไขได้โดยการเพิ่มชื่อของพวกเขาไป $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..