Drupal - ธีมและเลย์เอาต์

ในบทนี้ให้เราศึกษาเกี่ยวกับ Themes and Layouts. Drupal จะติดตั้งBartikธีมเป็นธีมเริ่มต้นระหว่างการติดตั้ง คุณสามารถเลือกธีมแบบเสียเงินหรือฟรีได้จากเว็บไซต์ทางการของ Drupal โดยทั่วไปการจัดวางเป็นการจัดเรียงข้อความและกราฟิก เป็นความคิดที่ดีในการเลือกธีมโดยคำนึงถึงรูปแบบต่างๆที่จะใช้ในไซต์ของคุณ

Step 1- ไปที่เว็บไซต์ทางการของ Drupalแล้วคลิกGet Started.

Step 2 - คลิกที่ All Themes ดังแสดงในหน้าจอต่อไปนี้

Step 3- คุณจะได้รับรายการธีม เลือกธีมที่คุณต้องการ (ให้เราเลือกAdaptive theme ตามที่ประกอบด้วย Layout & General Settingsซึ่งจะกล่าวถึงต่อไปในบทนี้) แล้วคลิก Version ดังแสดงในหน้าจอต่อไปนี้

Step 4 - ถัดไปคลิกขวา Download file และคัดลอกที่อยู่ลิงค์ตามที่แสดงในหน้าจอต่อไปนี้

Step 5 - คุณยังสามารถดาวน์โหลดธีมได้โดยตรงโดยคลิกที่ archive file และโมดูลจะถูกดาวน์โหลดลงในคอมพิวเตอร์ของคุณดังที่แสดงในหน้าจอต่อไปนี้

Step 6 - ไปที่ Appearance แล้วคลิก Install new theme ดังแสดงในหน้าจอต่อไปนี้

Step 7 - คุณสามารถวางที่อยู่ลิงก์ที่คุณคัดลอกมาได้ step (4) แล้วคลิกปุ่มติดตั้งดังที่แสดงในหน้าจอต่อไปนี้

Step 8 - คุณยังสามารถอัปโหลดไฟล์เก็บถาวรของธีมแทนการคัดลอกที่อยู่ลิงก์ได้หากคุณดาวน์โหลดแล้วคลิก Install ดังแสดงในหน้าจอต่อไปนี้

Step 9 - หน้าจอต่อไปนี้จะปรากฏขึ้นให้รอจนกว่าการติดตั้งจะเสร็จสิ้น

Step 10 - ถัดไปคลิก Enable newly added themes ดังแสดงในหน้าจอต่อไปนี้

Step 11- โดยค่าเริ่มต้นธีมจะถูกปิดใช้งาน เพื่อเปิดใช้งานให้คลิกEnable and set default ดังแสดงในหน้าจอต่อไปนี้

Step 12 - คลิกที่ Settings ดังแสดงในหน้าจอต่อไปนี้เพื่อกำหนดลักษณะที่ปรากฏสำหรับไซต์ของคุณ

Step 13 - Layout & General Settings ตัวเลือกจะปรากฏขึ้นบนหน้าจอในนี้ Adaptive theme ประกอบด้วย Standard layout, Tablet Layout, Smalltouch layout และ Panels & Gpanels. ตัวเลือกเหล่านี้ควบคุมการตั้งค่าการแสดงผลสำหรับธีม AT Admin ปัจจุบันที่ใช้งานอยู่ เมื่อไซต์ของคุณแสดงธีมการตั้งค่าเหล่านี้จะถูกใช้ ตอนนี้ให้เราพูดคุยเกี่ยวกับเค้าโครงเหล่านี้ทีละรายการ

Step 14 - ใน Standard layout คุณสามารถเลือกเค้าโครงสำหรับเดสก์ท็อปแล็ปท็อปและอุปกรณ์หน้าจอขนาดใหญ่อื่น ๆ

  • Choose sidebar positions - คุณสามารถเลือกตำแหน่งแถบด้านข้างได้โดยคลิกที่ปุ่มตัวเลือก

  • Set the width of each sidebar - คุณสามารถกำหนดความกว้างของแถบด้านข้างแรกและแถบด้านข้างที่สองและหน่วยเป็น% หรือ px หรือ em

  • Set the page width - คุณสามารถกำหนดความกว้างของหน้าได้

  • Set a max width − คุณสามารถเลือกหรือยกเลิกการเลือกเพื่อตั้งค่าความกว้างสูงสุดได้

  • Media query for this layout - แบบสอบถามสื่อกำหนดกฎรูปแบบที่แตกต่างกันสำหรับอุปกรณ์สื่อต่างๆและโดยค่าเริ่มต้นสำหรับรูปแบบนี้จะเป็น 1025px.

Step 15 - ถัดไปคลิก Tablet Layoutดังแสดงในหน้าจอต่อไปนี้ อุปกรณ์แท็บเล็ตจะมีสองทิศทางLandscape และ Portrait. คุณสามารถกำหนดโครงร่างที่แตกต่างกันสำหรับแต่ละแนว

ภายใต้ Landscape tablet และ Portrait tabletคุณสามารถเลือกตำแหน่งแถบด้านข้างความกว้างของแถบด้านข้างและความกว้างของหน้า แบบสอบถามสื่อสำหรับLandscape tabletจะมีความกว้างต่ำสุด: 769px และความกว้างสูงสุด: 1024px สำหรับPortrait tablet จะมีความกว้างต่ำสุด: 581px และความกว้างสูงสุด: 768px

Step 16 - ตอนนี้คลิก Smalltouch Layout ดังแสดงในหน้าจอต่อไปนี้ Smalltouch layout จะมีสองทิศทาง Landscape และ Portrait. คุณสามารถกำหนดโครงร่างที่แตกต่างกันสำหรับแต่ละแนว

ใน Landscape Smalltouchคุณสามารถเลือกตำแหน่งแถบด้านข้างและกำหนดความกว้างได้ Portrait Smalltouchมักจะแสดงในคอลัมน์เดียวโดยมีแถบด้านข้างซ้อนกันในแนวนอนใต้เนื้อหาหลัก แบบสอบถามสื่อสำหรับLandscape Smalltouch จะมีความกว้างต่ำสุด: 321px และ max-width: 580px และสำหรับ Portrait Smalltouch จะมีความกว้างสูงสุด: 320px

Step 17 - ถัดไปคลิก Panels & Gpanelsดังแสดงในหน้าจอต่อไปนี้ ชุดรูปแบบที่ปรับเปลี่ยนได้รองรับพาเนลที่ตอบสนองและรูปแบบ Gpanel ในการใช้ความสามารถนี้คุณสามารถใช้โมดูลแผงจอภาพ , ชุดแสดงผล (พร้อมแผง) หรือรูปแบบGpanelsแบบปรับเปลี่ยนได้

คุณสามารถเลือกตัวเลือกสำหรับอุปกรณ์แต่ละช่วงและจัดวางประเภทได้ ให้เราดูทีละคน

  • ภายใต้ Standard layoutคุณสามารถเลือกเค้าโครงที่คุณต้องการใช้เมื่อไซต์กำลังดูในรูปแบบมาตรฐาน โดยคลิกที่TWO, THREE, FOUR, FIVE, SIX or INSETคุณสามารถเลือกการจัดเรียงคอลัมน์ดังที่แสดงในหน้าจอต่อไปนี้

  • ทำตามขั้นตอนเดียวกันสำหรับ TABLET LANDSCAPE, TABLET PORTRAIT และ SMALLTOUCH LANDSCAPE เค้าโครง

Step 18 - เมื่อเสร็จสิ้นการกำหนดค่าทั้งหมดของคุณแล้วให้คลิก Save configurations ดังแสดงในหน้าจอต่อไปนี้