Wordpress and Elementor

[วัชรากรณ์ ศักดิ์บูรณะ]

เพิ่มใน 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;
}
}