เพิ่มใน function.php ของ Theme
ตั้งพาสเวิร์ดแบบง่ายๆ ก็ทำได้
-------------
/**
* Remove password strength check.
*/
function iconic_remove_password_strength() {
wp_dequeue_script( 'wc-password-strength-meter' );
}
add_action( 'wp_print_scripts', 'iconic_remove_password_strength', 10 );
หัวข้อการบรรยายครั้งที่ 1
วันที่ 18 มกราคม 2564
------------------------------
วัตถุประสงค์
เข้าใจหลักการทำงานของโปรแกรม
แก้ไขปรับปรุงเปลี่ยนแปลงได้
สร้างขึ้นใหม่ตามความต้องการ
ประวัติความเป็นมา Internet & WebSite
Html (Hypertext Markup Language)
DreamWeaver
Dynamic – PHP กับ Database (SQL)
2003 WordPress, Hi5, Joomla, Youtube, Facebook
Responsive Design กับ Html5 (3 Devices)
WordPress, Prestashop Online Marketing
Settings
General
Tagline
Site Language
TimeZone
Date Format
Time Format
Plugins - Seed Buddhist Year
Permalinks
Custom Structure
Users
Profile
Language
First Name
Last Name
Nickname (Required)
Display name publicly as
Profile Picture
Plugins – Simple Local Avatars
Plugins
วิธีการติดตั้งและลบออก
Install -> Activate -> Deactivate -> Delete
Installed Plugins
Akismet Anti-Spam
Register -> API Key
Limit Login Attempts Reloaded
Add New
Simple Local Avatars
Duplicate Page
WPFront Scroll Top
Enable
Elementor Website Builder
Getting Started with Elementor
Starter Templates
Elementor - Header, Footer & Blocks
WPForms Lite
Tawk.To Live Chat
https://dashboard.tawk.to/login
Popup Builder – Responsive WordPress Pop up – Subscription & Newsletter
เปลี่นวันเวลาเป็นปีพ.ศ.
Seed Buddhist Year -> เปลี่ยนเป็นปีพ.ศ. แต่เวลาเพี้ยน
PP Auto Thai Date -> เปลี่ยนได้แต่ชื่อเดือน
Starter Templates
วิธีการติดตั้งและลบออก
Duplicate Page
Clips & Editing Test Pages
HomeWork
แก้ไขปรับปรุงหน้าเว็บต่างๆ
Next
ตรวจ/แก้ไข/และสร้างหน้าเว็บขึ้นใหม่
รายละเอียดเพิ่มเติมในการโพสและสร้างเพจ
Plugins อื่นๆ
-------------
คลิปประกอบการเรียนการสอน
01 How to Build a WordPress Website With Elementor
เป็นคลิปต้นฉบับจาก Elementor แสดงภาพรวมการใช้งาน WordPress
02 Getting Started With Elementor
เป็นคลิปต้นฉบับจาก Elementor แสดงภาพรวมและตัวอย่างการใช้งาน Elementor
03 How To Make a WordPress Website 2020-21
เป็นคลิปการสร้างเว็บไซท์ Wordpress ด้วย Elementor ในปี 2020 กับ 2021
อธิบายการใช้งาน Elementor ได้อย่างเป็นระบบ ต่อเนื่อง รวดเร็ว เข้าใจง่าย
อย่างเช่นคลิปปี 2021 เสนอวิธีการสรุปเป็นบันได 3 ขั้นในการทำเว็บ ได้แก่
1. Setup = การติดตั้งระบบโปรแกรม
2. Options = Scope หรือ Feature ทั้งหมดที่ต้องการจะให้มีให้แสดงในเว็บไซท์
3. Design = การตกแต่ง ความสวยงาม การนำเสนอหน้าเว็บต่างๆ ในแนวที่ต้องการ
หัวข้อการบรรยายครั้งที่ 2
วันที่ 28 มกราคม 2564
-----------------
วข้อการบรรยายครั้งที่ 3
วันที่ 28 มกราคม 2564
-----------------
วันที่ 25 กุมภาพันธ์ 2564
CheckPoint 1 : คุณทำได้ 1
นักศึกษาควรทำสิ่งต่อไปนี้ได้ก่อนที่จะก้าวไปสู่การเรียนการสอนครั้งที่ 4
หากยังทำไม่ได้ ควรทบทวนสอบถามจากเพื่อนๆ และตัวผู้สอนได้อย่างเต็มที่จนเกิดความเข้าใจและสามารถทำด้วยตัวเองได้
-----------
คลิปต้นฉบับจาก Elementor
แสดงภาพรวมการใช้งาน WordPress
01 How to Build a WordPress Website With Elementor
02 Getting Started With Elementor
03 How To Make a WordPress Website 2020-21
-----------
How to Build a WordPress Website With Elementor
A WordPress Site's Frontend vs. Backend
Getting Started With Elementor
Building The Home Page - Step By Step
How To Make a WordPress Website 2020
How To Make a WordPress Website - 2021 - 3 Simple Steps
Sections, Columns, Margin & Padding EXPLAINED - Elementor Tutorial Wordpress for Page Layout
ทำให้ image box จัดเรียงตามแนวนอน horizontal
ใส่ code ใน additional css
--------
//*image-box image left
@media (max-width: 767px) {
.elementor-widget-image-box.elementor-vertical-align-middle .elementor-image-box-wrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media (max-width: 767px) {
.elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper {
text-align: left;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
@media (max-width: 767px) {
.elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper, .elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
นำภาพจาก Google Drive มาวาง
---------------
หลังจาก share google drive folder แล้ว
ก็อปภาพที่แชร์แต่ละภาพ เอา ID มาวางแทนที่ Url ตัวอย่างด้านล่างนี้
https://drive.google.com/file/d/1EB_VtnF_sk6Ijz2pu-9vXa1lZQ4Awsa8/view
https://drive.google.com/uc?export=view&id=1EB_VtnF_sk6Ijz2pu-9vXa1lZQ4Awsa8
ต้องการทำลิ้งค์เพิ่มเติมในการคลิกที่ภาพ ให้ copy url ไปวางแบบ Custom แล้วใส่เครื่องหมายถูกไว้ในช่อง open in new windows
woo additional css code
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin: 0 6px 2.992em 0;
box-shadow: none !important;
padding: 6px;
border: 1px solid #ccc;
}
.woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover {
margin: 0 6px 2.992em 0;
box-shadow: 0 0 6px #000 !important;
padding: 6px;
border: 1px solid #ccc;
}
.single-product .images > .woocommerce-product-gallery__wrapper {
box-shadow: 6px 6px 6px 0px rgba(170, 170, 170, 0.75);
}
@media (max-width: 767px) {
.elementor-widget-image-box.elementor-vertical-align-middle .elementor-image-box-wrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media (max-width: 767px) {
.elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper {
text-align: left;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
@media (max-width: 767px) {
.elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper, .elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}