ธีมเนวี

เลือกใช้ธีมของ wordpress ตัวไหนดี #neve01

เมื่อ 10 พ.ย.64 มีเพื่อนถามว่าใช้ theme ของ wordpress ตัวไหนดี วันนี้ขอเสนอ ธีมเนวี (Neve theme) คือ ธีมที่รองรับหน้าจอหลายขนาด มีอีดิเตอร์ลากวาง น้ำหนักเบา เข้ากันกับเอสอีโอ มีไซต์เริ่มต้นให้เลือก ซื้อฟังก์ชันเพิ่มได้ และเป็นที่นิยม จากการสืบค้น พบว่า 1) ใน wordpress.org แนะนำธีมไว้ โดย Neve เป็น 1 ใน 9 ธีมแรก 2) ส่วน atthemes.com เขียนเรื่อง free wordpress themes แนะนำให้ Neve เป็นอันดับที่ 3 ที่น่าใช้ 3) ส่วน codeinwp.com เขียนเรื่อง best free themes พบว่า Neve เป็นแบบ Multipurpose และ Active Installs สูงถึง 200000+
4) ส่วน mustketing.com จัดให้เป็นหนึ่งในเจ็ดธีมที่ดีที่สุด มีน้ำหนักเบา และผู้สร้างเพจช่วยจัดการบล็อก ซึ่งคุณสมบัติเด่นของ Neve Theme มีดังนี้
1. ตอบสนองตามขนาดจอภาพ (responsive design)
2. รองรับ อีดิเตอร์ลากวาง (compatibility with drag-and-drop page builders)
3. ใช้ทรัพยากรไม่มาก และเข้ากันกับเอสอีโอ (lightweight and SEO friendly)
4. ตัวอย่างไซต์เริ่มต้น (30+ starter sites)
5. มีตารางราคา (pricing tables : elementor and orbitfox plugin)
6. สร้างกล่องเนื้อหาแบบซ้อนทับ (overlay content blocks)
7. มีตัวอย่างมากมาย (multiple demos)
8. มีเอฟเฟคการแสดงและโหลดเนื้อหาแบบขี้เกียจ (parallax and lazy loading effects)
เมื่อต้องการทดสอบ wp-admin โดยไม่ติดตั้ง ทดสอบใช้งานได้เลย
มีบริการที่ tastewp.com

สำหรับ ตัวอย่างไซต์เริ่มต้น (30+ starter sites) นั้น มีให้เลือกติดตั้งใช้งาน โดยเข้าผ่าน wp-admin, Dashboard, Appearance, Neve Options, Starter Sites แต่ต้อง import Cloud templateds และ pattern collection plugin ก่อน ซึ่งต้องทำการ install และ activate ก่อนแสดงรายการให้เลือก แต่ถ้าพอใจ template ที่เค้าให้มาแล้ว ก็ไม่ต้องเลือกใหม่
นอกจาก Neve แล้ว ยังมี Theme ให้เลือกอีกมากมาย
ตรวจสอบว่าเราใช้ theme ของอะไรอยู่ ได้ที่ wpthemedetector.com
1. blog.nation.ac.th ใช้ Twenty ten
2. thaiall.com/blog ใช้ Twenty Sixteen
3. thainame.net/edu ใช้ Tycoon
4. thaiabc.com/lampangnet ใช้ Sorbet

drop down menu และการเลือก page หรือ blog #neve02 เข้า Dashboard ผ่าน /wp-admin
พบ Posts, Media, Pages, Comments, Appearance, Plugins, Users, Tools, Settings
Appearance, Customize, Layout,
Homepage settings, Your homepage displays : {Your lastest posts, A static page}
wp-admin, Appearance, Customize, Menus, primary,
พบ page : Home, About, Portfolio, Project Details, Blog,
Add Items : Custom Links, Pages, Posts, Categories, Tags,
ใช้ Mouse จัดเป็น Drop down menu ได้

สร้าง page มี block และ pattern ให้เลือก #neve03

ในการเขียนเนื้อหา (content) ลงบน blog หรือ page นั้น สิ่งที่สำคัญ คือ การวางองค์ประกอบของเนื้อหาเพื่อนำเสนอได้อย่างเหมาะสม ซึ่งการเลือกรูปแบบ ที่ประกอบด้วย object หรือ block ที่จะวางนั้น ควรจัดวางอย่างไร มีแบบของวัตถุให้เลือกมากมาย อาทิ ข้อความ รูปภาพ คลิปวิดีโอ คลิปเสียง ตาราง รายการ ปุ่ม ไอคอน หรือฝังเนื้อหาจากภายนอก
ชวนมองหา block ที่ชอบกัน
เริ่มต้นจากการสร้าง page ชื่อ "test" เข้า Dashboard ผ่าน /wp-admin
คลิ๊ก Pages, Add New, Add title = test, Publish
คลิ๊ก Pages, test เลือก edit
พบ Type/to choose a block บน content area
แล้วคลิ๊ก + , browser all พบ Blocks
ถ้าต้องการลบ Block ให้กด Shift+Alt+Z
มี Blocks อยู่ 6 กลุ่ม
1. Text - ข้อความ
2. Media - สื่อมัลติมีเดีย
3. Design - การจัดคอลัมหรือแบ่งหน้า
4. Widgets - ชุดโปรแกรมเล็ก ๆ เช่น html
5. Theme - ชุดรูปแบบ เช่น login form
6. Embeds - ฝังโค้ดจากภายนอก เช่น youtube
และมี Patterns อยู่ 6 กลุ่ม
1. Buttons - แบบแผนปุ่ม
2. Columns - แบบแผนคอลัม
3. Gallery - แบบแผนห้องภาพ
4. Headers - แบบแผนส่วนหัว
5. Text - แบบแผนข้อความ
6. Query - แบบแผนที่เตรียมไว้
สำหรับบัญชี wordpress ที่ผูกกับ Jetpack จะพบ block มาให้เลือกใช้มากกว่านี้

การสร้าง welcome page #neve04 หน้าแรกสุดของทุก website คือ welcome page ที่นิยมไม่กำหนด header หรือ footer หลายเว็บไซต์มีภาพหนึ่งภาพ และกล่าวยินดีต้อนรับ ซึ่งต่างกับ page หรือ blog ทั่วไปที่จะมีรายละเอียด และลิงค์เชื่อมโยงมากมาย มีขั้นตอนการสร้างเพจ ดังนี้
Wp-admin, Pages, Add New, Title = Welcome page
Insert block = image, upload , link
Block, Image, Change alignment = center
Settings, Page, Permalink, URL Slug = welcome
Shift+Alt+S เพื่อเข้า Page Settings
พบ 3 กลุ่มตัวเลือก
- Page Layout
Sidebar = none
Container = Full Width
Custom Content Width = 100%
- Page Title
Title allign = Left เหมือนเดิม
- Elements
Disable Header = enable
Disalbe Footer = enable
Disable Title = enable
Wp-admin, Appearance, Customize, Layout, Homepage Settings
เปลี่ยน A static page จาก Home เป็น Welcome page

การกำหนด Left sidebar #neve05

สร้างเพจที่มี sidebar เริ่มจาก wp-admin, Dashboard, Pages, Add New, "page name"
Page setting, คลิ๊ก Neve icon หรือ Shift+Alt+S
Sidebar = Right
Container = Contained
Custom Content Width = 80%
กำหนด sidebar ให้กับ blog
wp-admin, Dashboard, Appearance, Customize,
Layout, Content / Sidebar, Blog/Archive และ Single Post กำหนดให้ side bar อยู่ด้านขวา (80%)
Layout, Blog/Archive, Blog layout = Grid แบบ 3 Columns กำลังสวย

จากนั้น
ทำการแก้ไข Header หรือ Footer ซึ่งต้อง enable ด้วยในแต่ละ page
wp-admin, Dashboard, Appearance, Customize
คลิ๊กใน Content จนพบ Header ในหน้าต่าง Preview ด้านขวา
หรือ คลิ๊ก Header, Header Top , Header Main, Header Bottom
Footer Top, Footer Main , Footer Bottom
เช่น Footer one เพิ่ม Custom HTML คำว่า "ชื่อองค์กร"
ถ้ามีปัญหา header หรือ footer builder ล้ม ทำให้ไม่แสดง neve footer editor บน chrome ลองเปลี่ยนจาก chrome เป็น edge หรือ restart เครื่องอีกครั้ง

ฟอนต์ Kanit และ quick links #neve06

Font ที่แสดงใน wordpress สามารถเปลี่ยนไปใช้ฟอนต์ของ Google font ได้ เช่น Kanit, Chonburi, Itim, Maitree, Pattaya เป็นต้น ซึ่ง Neve theme ได้โหลดฟอนต์มาพร้อมให้ถูกเรียกใช้ สามารถเข้า Customize Font เพื่อเปลี่ยนฟอนต์ผ่านหน้า Quick links ของ Appearance, Neve options ได้เลย ซึ่งมีตัวเลือกที่คาดว่า นักพัฒนามักเรียกใช้ได้ถูกเตรียมไว้ 8 links
wp-admin, Appearance, Neve Options, Customizer quick links
- Customize fonts, จาก Poppins เป็น Kanit
wp-admin, Appearance, Customize, Typography, Change main font
- Body , Font Family จาก Poppins เป็น Kanit
พบว่า เปลี่ยนเป็น Kanit หมดครับ
และมี Customizer quick links 8 รายการ น่าสนใจทบทวน
1. Upload Logo
2. Set Colors
3. Customize Fonts
4. Layout Options
5. Header Options
6. Blog Layouts
7. Footer Options
8. Content / Sidebar

การเพิ่ม sidebar ในเพจ และแก้ไขรายการใน sidebar #neve07

Sidebar คือ รายการเมนูด้านข้าง ซึ่งแสดงผลใน Blog ทุก Post หรือกำหนดการแสดงในแต่ละ Page ด้านซ้าย/ขวา/ไม่แสดงได้ ซึ่ง Sidebar จะประกอบด้วย Widgets เรียงต่อกันจากบนลงล่าง อาจเป็นเมนู ปฏิทิน ปุ่มแชร์ หรือกล่องสืบค้น ในกรณีที่ไม่มี Widgets เหลือใน Sidebar ก็จะไม่มีการแสดง Sidebar บนหน้า blog
Top menu อยู่ที่ Appearance, Menus
Sidebar อยู่ที่ Appearance, Widgets, Sidebar
Header อยู่ที่ Appearance, Customize, Header
Footer อยู่ที่ Appearance, Customize, Footer

การใช้ Popup maker โดยติดตั้ง plugins เพิ่ม #neve08

หน้าต่างลอยขึ้น (Popup window) ให้กับผู้เข้าชมเว็บไซต์ได้เห็นก่อนเข้าถึงเนื้อหาอื่น ในกรณีที่ผู้ดูแลเว็บไซต์ต้องการแจ้งข้อมูลข่าวสารสำคัญที่ไม่ควรถูกมองข้าม เช่น ข่าวรับสมัคร ข่าวส่วนลด ข่าวเหตุการณ์สำคัญ หรือข่าวด่วน ในระบบ wordpress มี plugins ชื่อ Popup maker พบว่า ถูกติดตั้งไปถึง 700000+ รองรับ Wordpress รุ่น 4.9 หรือสูงกว่า รองรับ PHP 5.6 หรือสูงกว่า ซึ่งบริการนี้ เราต้องสร้าง Popup post ขึ้นมา เขียนเนื้อหา และรูปภาพ จากนั้นกำหนดคุณสมบัติสำคัญ คือ Time Delay/Auto Open , Open Popup Close, Delay:500 และ Open Popup Close , 1 Month แล้วเปิดบริการ Popup ที่สร้างใหม่ ทุกครั้งที่มีผู้เยี่ยมชมเว็บไซต์ ตัว Popup ก็จะปรากฎขึ้นมาโดยอัตโนมัติ และจะแสดงเพียงครั้งเดียว

การใช้ Dashicons โดยติดตั้งเพิ่มใน functions.php #neve09

icon สวย ๆ สำหรับ wordpress พบการใช้งานอย่างแพร่หลายบน Top menu หรือ Sidebar แล้วพบว่า Dashicons ได้ถูกติดตั้งมาบน Wordpress ตั้งงแต่รุ่น 3.8 จึงใช้งานได้ทันที การใช้งานก็เพียงแต่กำหนด code เช่น <span class="dashicons dashicons-admin-home"> </span> แต่พบว่า Neve Theme กำหนด code นี้ใน Top menu แล้วแสดงผล ขณะที่อยู่ใน Admin mode เมื่อเปลี่ยนไปเปิดโดย Guest พบว่า icon ไม่แสดง จึงต้องเข้าไปแก้ไข functions.php ใน Neve theme โดยเพิ่ม code 4 บรรทัดนี้ ต่อบรรทัดสุดท้าย เพื่อให้มีการโหลด Dashicons อย่างถูกต้อง ผลลัพธ์คือ icon แสดงผลได้ทั้งใน Admin mode และ Guest mode
// Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

เรื่อง plugins #neve10

wp-admin, Plugins, Installed Plugins, Add New Search = copy พบ Yaost Duplicate Post ที่สามารถทำการ cloning posts and pages ได้ และ Last Updated : 3 weeks ago มี Active Installations: 4+ Million เมื่อคลิ๊ก Install Now แล้วรอจนติดตั้งเสร็จ จากนั้นเลือกคลิ๊ก Activate เมื่อติดตั้ง Yaost Duplicate Post แล้ว และเข้าไปอยู่ในหน้ารายการ Posts หรือ Pages แล้วใช้ Mouse ไปอยู่ over เหนือ page ที่สนใจ จะพบตัวเลือก clone เพียงแต่คลิ๊กก็จะได้ Page หรือ Post ใหม่ เป็น draft page ที่เกิดจากการทำสำเนาแฟ้มต้นฉบับขึ้นมาอีกหนึ่งเพจ ปรากฎขึ้นในรายการเพจ ที่เป็นการคัดลอกเพจ และมีคำว่า Draft ต่อท้ายเพจใหม่นั้น สังเกตเวลาของ Last Modified ที่ได้จะเป็นเวลาล่าสุด ถ้าไม่ต้องการ ก็เลือกคลิ๊ก Trash เพื่อลบ เพจนั้นก็จะหายไป wp-admin, Plugins, Installed Plugins, Add New Search = page-builder พบ Elementor Website Builder ที่สามารถกำหนดสีพื้นของเพจ แต่ละหน้าต่างกันได้ และ Last Updated : 4 weeks ago มี Active Installations: 5+ Million เมื่อคลิ๊ก Install Now แล้วรอจนติดตั้งเสร็จ จากนั้นเลือกคลิ๊ก Activate เมื่อมีการแก้ไข Page หรือ Post พบ Button : Edit with Elementor ซึ่งต้องเลือกระหว่าง Wordpress Editor = Edit Page กับ Edit with Elementor 1) เมื่อคลิ๊กก็จะเข้าสู่ Elementor Editor ซึ่งเป็นตัวใหม่ คลิ๊ก Settings ที่มุมล่างซ้าย คลิ๊ก Style คลิ๊ก icon : Classic คลิ๊กเลือกสีพื้นเป็นสีเหลือง แล้วคลิ๊ก Update ผลลัพธ์จะเป็นไปตาม Elementor Editor ซึ่ง Block ที่สร้างจากแต่ละ Editor จะใช้ร่วมกันได้ไม่สมบูรณ์ 2) ถ้าคลิ๊ก Edit Page ก็จะเข้าสู่ Wordpress Editor ซึ่งเป็นตัวเก่า ถ้าไม่เลือก Edit with Elementor ก็จะใช้ตัวเก่าต่อไป ซึ่งบาง Block ที่สร้างจากตัวใหม่ จะไม่แสดงผลบน Editor ตัวเก่า 3) ถ้าคลิ๊ก Preview แล้ว พบว่า บน Top menu จะมีตัวเลือก Edit with Elementor และ Edit Page ให้เลือกใช้ หรือพบเฉพาะ Edit Page ถ้า Page นั้นแก้ไขล่าสุดด้วย Wordpress Editor แต่จะกลับไป Elementor ก็คลิ๊กเลือกใน Edit Page ได้ คุณสมบัติ เช่น สีพื้นหลังที่เคยตั้งไว้ด้วย Elementor ยังคงอยู่ สามารถแก้ไขต่อได้ 4) ถ้าเลือก Edit Page จะเข้าต้องเลือกอีกครั้ง ระหว่าง Back to WordPress Editor กับ Edit with Elementor ซึ่งจะพบ Block ที่เคยสร้างจาก Editor ทั้งสองตัว และพบ Block ที่มีปุ่ม Attemp Block Recovery สามารถกดได้ไม่พบปัญหา แต่คุณสมบัติที่เคยใช้ใน Elementor บางอย่างจะหายไป เช่น การกำหนดสีพื้นในให้กับ Page เป็นต้น 5) Block ชื่อ Lastest Post บน WordPress Editor เมื่อใช้ Elementor จะเป็นชื่อ Recent Post ซึ่งมี Properties แบบละเอียดใน Advanced แต่พบว่า คุณสมบัติมากมายต้อง Go pro จึงจะใช้งานได้ กรณีของ Recent Post ก็เช่นกัน มีให้กำหนดคุณสมบัติน้อยมาก การกำหนดสีให้กับ page ให้แก้ไขใน Additional CSS https://cleversequence.com/how-to-change-the-background-color-of-a-single-page-in-wordpress/ /* test1 = id-94 */ .page-id-94{background-color:pink;} /* test2 = id-353 */ body.page.page-id-353{background-color:yellow;} MetaSlider wp-admin, Plugins, Installed Plugins, Add New Search = Gallery พบ MetaSlider ที่สามารถสร้าง Gallery แบบ Lightbox ได้ และ Last Updated : 2 weeks ago มี Active Installations: 700000+ เมื่อคลิ๊ก Install Now แล้วรอจนติดตั้งเสร็จ จากนั้นเลือกคลิ๊ก Activate ได้ระบบ Gallery แบบ Slide ชื่อ MetaSider บน Sidebar ของ Wp-admin เมื่อเข้าครั้งแรก เลือก Create blank slideshow เลือก New แล้วตั้งชื่อ เช่น "Test1" เลือก Add slide เพื่อเพิ่มภาพประจำสไลด์ แล้วกด Save ซึ่งผลลัพธ์ที่ได้ใน Preview คือ การเลื่อนสไลด์อัตโนมัติทีละภาพไปจนครบตามที่เพิ่มภาพเข้าไปในชุดสไลด์ที่ได้สร้างขึ้น ที่น่าสนใจ คือ มีตัวเลือกจัดการในแต่ละภาพได้ เช่น ภาพใดกำหนดให้ Open in a new window = check จะต้องกำหนด url ให้กับภาพได้ เมื่อคลิ๊กบนภาพนั้นแล้ว จะเปิดภาพนั้นในหน้าต่างใหม่ ส่วนการนำชุด Slide เข้า Page หรือ Post นั้น ทำในขณะ Edit Page แล้วสั่ง Add Block แล้วค้นหาบล็อกแบบ MetaSlider แล้วเลือกชุด Slide ที่เคยสร้างขึ้นก่อนหน้านี้ ก็จะได้ Gallery แบบ Slide ไปแสดงบน Page แล้ว

Customizing - Additional CSS

.builder-item{display: [กำหนดค่าที่นี่] !important;} 
.neve-breadcrumbs-wrapper{display: [กำหนดค่าที่นี่] !important;}
.size12{font-size:12px;}
.color1{color:#000080;}
.bgcolor1{background-color:#ffff00;}
/* test2 = id-353 */
.page-id-94{background-color:pink;}
body.page.page-id-353{background-color:yellow;}
/* menu background */
.header-menu-sidebar-bg{background-color:#E93B81;}

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net