www.colorpack.co.th

อบรมการใช้งาน

Joomla Advanced Content Management System

www.colorpack.co.th

พิศาล เชื้อชาติไชย (บู) Project Manager - ColorPack Creations Co., Ltd.

www.facebook.com/chueachatchai www.colorpack.co.th www.joomlachannel.com www.colorpackstore.com

www.colorpack.co.th

เป็นระบบจัดการเนื้อหา โดยสามารถสร้างชนิดของเนื้อหา (Type)ได้ โดยสามารถเพิ่มช่องในการกรอกข้อมูลได้

หลายชนิด (CCK)

FLEXIContent คืออะไร

Content Construction Kit

www.colorpack.co.th

FLEXIContent ดีอย่างไร

- นำเนื้อหาจาก joomla content มาใช้ได้เลย - ง่ายต่อการใช้งาน - มีความยืดหยุ่นในการใช้งานสูง - รองรับเนื้อหาจำนวนมากได้ - มีระบบ Workflow - รองรับการทำงานหลายภาษาในหน้าเดียว

www.colorpack.co.th

ต่างกับ Joomla ปรกติอย่างไร

www.colorpack.co.th

ต่างกับ Joomla ปรกติอย่างไร

www.colorpack.co.th

การแสดงผล ชนิดของเนื้อหา

www.colorpack.co.th

ตัวอย่างเว็บที่ใช้ FLEXIContent

www.colorpack.co.th

FLEXIContent

เว็บหลัก : www.flexicontent.org

Github : https://github.com/FLEXIcontent/flexicontent-cck

www.colorpack.co.th

ติดตั้ง FLEXIContent

www.colorpack.co.th

ติดตั้ง FLEXIContent

www.colorpack.co.th

ติดตั้ง FLEXIContent

www.colorpack.co.th

ติดตั้ง FLEXIContent

www.colorpack.co.th

เข้าใช้งาน FLEXIContent

www.colorpack.co.th

เตรียมความพร้อม FLEXIContent

คลิ๊กอัปเดต ให้หมดแล้ว คลิ๊ก Refresh

www.colorpack.co.th

เตรียมความพร้อม FLEXIContent

คลิ๊ก Configuration

www.colorpack.co.th

เตรียมความพร้อม FLEXIContent

คลิ๊ก Save & Close

www.colorpack.co.th

เริ่มต้นใช้งาน FLEXIContent

www.colorpack.co.th

หน้าหลัก FLEXIContent

ส่วนรายงาน แจ้งเตือน

Quick Icons

เมนู

www.colorpack.co.th

ขั้นตอนการทำงาน

สร้าง Templates

สร้าง Typeคิดรูปแบบการแสดงผล

สร้าง Fields

นำ Fields ไปแสดงในแทมเพลต

ตั้งค่า Type ให้ใช้เทมเพลตที่สร้าง

www.colorpack.co.th

สร้าง Type

www.colorpack.co.th

Type คืออะไร

Type หรือ ชนิดของเนื้อหา เป็นการกำหนดการแสดงผลของเนื้อหาโดย

สามารถกำหนดช่องในการกรอกข้อมูลและการแสดงผลให้แตกต่างกันได้

www.colorpack.co.th

ตัวอย่าง Type

www.colorpack.co.th

หน้ารวม Typeคลิ๊กเมนู Type

สร้าง Type ใหม่

รายการ Type

www.colorpack.co.th

สร้าง Type ใหม่

ใส่ชื่อ ของ Type

บันทึก

www.colorpack.co.th

หน้ารวม Type หลังจากบันทึก

เทมเพลตที่ใช้ชื่อ Type ที่เราสร้าง จำนวน Fields

www.colorpack.co.th

สร้าง Fields

www.colorpack.co.th

Fields คืออะไร

Fields หรือ เขตข้อมูล เป็นการสร้าง ช่องในการกรอกข้อมูล หรือ ช่องในการ

ใส่ข้อมูล ซึ่งมีอยู่หลายชนิด เช่น

Fields File : ใช้ในการ Download ไฟล์ Fields Images : ใช้ในการ ใส่รูป Fields Text : ใช้ในการ ใส่ข้อความ

www.colorpack.co.th

หน้ารวม Fields Firlds เหล่านี้ ไม่

สามารถลบได้เนื่องจากเป็น ฟิลด์ บังคับที่ต้องมี

ทุก Type

www.colorpack.co.th

หน้ารวม Fields

คลิ๊กเมนู Fields

สร้าง Field ใหม่

www.colorpack.co.th

ขั้นตอนการสร้าง Fields

ใส่ชื่อ ฟิลด์ *ภาษาอังกฤษเท่านั้น

ใส่ป้าย ฟิลด์

เลือก ฟิลด์ ที่ต้องการ

www.colorpack.co.th

ขั้นตอนการสร้าง Fields

คลิ๊กเพื่อเลือก Type ที่จะใช้ ฟิลด์ นี้

เมื่อบันทึก จะเห็น ฟิลด์ ที่เราสร้าง

www.colorpack.co.th

สร้าง Templates

www.colorpack.co.th

Templates คืออะไร

เทมเพลต เป็นพื้นที่ ที่เราจะเอา ฟิลด์ มาวางเพื่อแสดงผล เป็น รูปแบบการแสดงผลของเนื้อหา ซึ่งแบ่งออกเป็นเทมเพลตของ Category และแทมเพลตของ item หรือ type โดยการวาง ฟิลด์ ใช้การลากวาง ฟิลด์ ลงไปในตำแหน่งของเทมเพลต

www.colorpack.co.th

Templates

เมนู templates

ปุ่ม copy templates

ปุ่ม จัดการ รูปแบบ item

ปุ่ม จัดการ รูปแบบ item

ปุ่ม จัดการ รูปแบบ Category

www.colorpack.co.th

เทมเพลตรูปแบบต่างๆ

www.colorpack.co.th

Titleabove-description-line1

above-description-line1-nolabel

above-description-line2

above-description-line2-nolabel

Description

under-description-line1

under-description-line1-nolabel

under-description-line2

under-description-line2-nolabel

แสดงก่อน Descriptionnolabel หมายถึงไม่แสดง

ชื่อ ฟิลด์

แสดงหลัง Descriptionnolabel หมายถึงไม่แสดง

ชื่อ ฟิลด์

Templates Blog Category Layout

www.colorpack.co.th

Templates Blog Category Layout

www.colorpack.co.th

Titlefields_top

before-description

Description

after-description

fields_bottom

แสดงก่อน Descriptionโดย fields_top จะถูกกำหนดให้แสดงฟิลด์

Author name ,Created date, Revisor name, Revised date and time, Categories, rating

favourites

สามารถไปตั้งค่า เปิดปิดได้ ที่ Type

แสดงหลัง Descriptionโดย fields_top จะถูกกำหนดให้แสดงฟิลด์Categories และ tag

สามารถไปตั้งค่า เปิดปิดได้ ที่ Type

Templates Blog Item Layout

www.colorpack.co.th

Templates Blog Item Layout

www.colorpack.co.th

Templates Default Category Layout

Title Field 1 Field 2 Field 3

Table

ตำแหน่ง Table สามารถนำฟิลด์ที่ต้องการมาแสดง

ได้

ช่อง Title จะถูกกำหนดให้แสดง ชื่อเนื้อหาและลิงค์

ได้

www.colorpack.co.th

Templates Default Category Layout

www.colorpack.co.th

Templates Default Item LayoutTitlesubtitle1

subtitle2

subtitle3

bottom

subtitle_tab1 subtitle_tab2 subtitle_tab3 subtitle_tab4 subtitle_tab5 subtitle_tab6

bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6

Images Top

Description

รายชื่อ ตำแหน่ง ของเทมเพลต โดยจะมีตำแหน่ง tab ซึ่งชื่อ tab จะตั้งค่าได้ที่

Type

www.colorpack.co.th

Templates Default Item Layout

www.colorpack.co.th

Templates FAQ Category Layout

รายชื่อ ตำแหน่ง ของเทมเพลต โดย nolabel หมายถึงไม่แสดงชื่อ ฟิลด์

Titleaftertitle

aftertitle_nolabel

aftertitle2

aftertitle_nolabel2

aftertitle3

aftertitle_nolabel3

www.colorpack.co.th

Templates FAQ Category Layout

www.colorpack.co.th

Templates FAQ Item LayoutTitlesubtitle1

subtitle2

subtitle3

bottom

subtitle_tab1 subtitle_tab2 subtitle_tab3 subtitle_tab4 subtitle_tab5 subtitle_tab6

bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6

Images Top

Description

รายชื่อ ตำแหน่ง ของเทมเพลต โดยจะมีตำแหน่ง tab ซึ่งชื่อ tab จะตั้งค่าได้ที่

Type

www.colorpack.co.th

Templates FAQ Item Layout

www.colorpack.co.th

Title Item Title Item

Templates items-tabbed Category Layout

รายชื่อ ตำแหน่ง ของเทมเพลต โดยจะมีตำแหน่ง tab ซึ่งชื่อ tab จะตั้งค่าได้ที่

Type

Title Item รูปแบบจะแสดงเนื้อหาแบบ TapTitlesubtitle1subtitle2subtitle3

bottom

subtitle_tab subtitle_tab subtitle_tab subtitle_tab subtitle_tab subtitle_tab

bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6

Images Top

Description

www.colorpack.co.th

Templates items-tabbed Category Layout

รูปแบบจะแสดงเนื้อหาแบบ Tap

www.colorpack.co.th

Templates Presentation Category LayoutTitlesubtitle1

subtitle2

subtitle3

bottom

subtitle_tab1 subtitle_tab2 subtitle_tab3 subtitle_tab4 subtitle_tab5 subtitle_tab6

bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6

Images Top

Description

เทมเพลตนี้จะนำเอารูปแบบของ Item มาแสดง

www.colorpack.co.th

Templates Presentation Category Layout

www.colorpack.co.th

การนำ ฟิลด์มาแสดงในแทมเพลต

การนำ ฟิลด์มาแสดงในแทมเพลต ใช้วิธีลาก ฟิลด์ด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือ

www.colorpack.co.th

การตั้งค่าใช้แทมเพลต ใน Type

ไปที่เมนู Type แล้วคลิ๊กที่ชื่อของ Type

ด้านขวามือ ล่างสุดเลือก Default item layout ที่

ต้องการ

www.colorpack.co.th

การตั้งค่าใช้แทมเพลต ใน Category

www.colorpack.co.th

การตั้งค่าใช้แทมเพลต ใน Category

www.colorpack.co.th

สร้าง Type Download ใช้แสดง ข้อมูล ดาวน์โหลดไฟล ์

www.colorpack.co.th

สร้าง Type Download

คลิ๊กเมนู Type

สร้าง Type ใหม่

www.colorpack.co.th

สร้าง Type Download

ใส่ชื่อของ Type

บันทึก

www.colorpack.co.th

คลิ๊กเมนู Fields

สร้าง Field ใหม่

สร้าง Fields Download

www.colorpack.co.th

สร้าง Fields Download

ใส่ป้ายชื่อฟิลด์

ใส่ชื่อ ฟิลด์ *ภาษาอังกฤษเท่านั้น

เลือก ฟิลด์ ที่ต้องการ

www.colorpack.co.th

สร้าง Fields Download

เลือก Type ที่จะใช้งาน

www.colorpack.co.th

สร้าง เทมเพลต Download

คลิ๊กเมนู Templates

คลิ๊กเพื่อ คัดลอกเทมเพลต

www.colorpack.co.th

สร้าง เทมเพลต Download

www.colorpack.co.th

สร้าง เทมเพลต Download

คลิ๊กเพื่อเข้าไปแก้ไข Item Layout

www.colorpack.co.th

สร้าง เทมเพลต Download

ลาก ฟิลด์ ไฟล์ดาวน์โหลดด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือแล้วบันทึก

www.colorpack.co.th

สร้าง เทมเพลต Download

คลิ๊กเพื่อเข้าไปแก้ไข Category Layout

www.colorpack.co.th

สร้าง เทมเพลต Download

ลาก ฟิลด์ ไฟล์ดาวน์โหลดด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือแล้วบันทึก

www.colorpack.co.th

สร้าง Category Download

คลิ๊กเมนู Category

สร้าง Category ใหม่

www.colorpack.co.th

สร้าง Category Download

ใส่ชื่อ Category ใหม่

เลือกเทมเพลต

www.colorpack.co.th

แก้ไข Type ให้ใช้เทมเพลต Download

คลิ๊กเมนู Type

คลิ๊กชื่อ Type Download เพื่อแก้ไข

www.colorpack.co.th

แก้ไข Type ให้ใช้เทมเพลต Download

เลือก Default Item layout เป็น เทมเพลต Download แล้ว บันทึก

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type Download

คลิ๊กเมนู Item

คลิ๊กเพื่อสร้างเนื้อหาใหม่

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type Download

เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก Type ให้เลือก Download

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type Download

ใส่ชื่อของเนื้อหา

เลือก Category

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type Download

คลิ๊ก Tap Item Type

ฟิลด์ ไฟล์ดาวน์โหลด ให้คลิ๊ก Add File

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type Download

คลิ๊ก เลือกไฟล์จากเครื่อง

ใส่ชื่อไฟล์ ใส่รายละเอียดไฟล์

อัปโหลดไฟล์

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type Download

ไฟล์ดาวน์โหลดที่ถูกใช้งานแล้ว จะมีขีดและเป็นสีแดง

www.colorpack.co.th

สร้าง Menu ใหม่

* การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu

www.colorpack.co.th

สร้าง Menu ใหม่

www.colorpack.co.th

สร้าง Menu ใหม่

www.colorpack.co.th

ด้านหน้าเว็บ Category Layout

www.colorpack.co.th

ด้านหน้าเว็บ Item Layout

www.colorpack.co.th

ตั้งค่า ฟิลด์ไฟล์ เพิ่มเติม

www.colorpack.co.th

สร้าง Type Gallery เพื่อแสดงรูปภาพแบบแกลเลอรี

www.colorpack.co.th

สร้าง Type Gallery

คลิ๊กเมนู Type

สร้าง Type ใหม่

www.colorpack.co.th

สร้าง Type Gallery

ใส่ชื่อของ Type

บันทึก

Gallery

www.colorpack.co.th

คลิ๊กเมนู Fields

สร้าง Field ใหม่

สร้าง Fields Gallery

www.colorpack.co.th

สร้าง Fields Images Show แสดงหน้า Category

ฟิลด์นี้จะแสดงรูปเดียว

www.colorpack.co.th

สร้าง Fields Gallery

หากต้องการให้ใส่รูปได้หลายรูปเพื่อทำ Gallery ให้คลิ๊กเลือก Acts as gallery เป็น Yes

www.colorpack.co.th

สร้าง เทมเพลต สำหรับ Gallery

คลิ๊กเมนู Templates

คลิ๊กเพื่อ คัดลอกเทมเพลต

www.colorpack.co.th

สร้าง เทมเพลต Gallery

Gallery

Gallery

www.colorpack.co.th

สร้าง เทมเพลต Gallery

คลิ๊กเพื่อเข้าไปแก้ไข Item Layout

www.colorpack.co.th

สร้าง เทมเพลต Download

ลาก ฟิลด์ Galleryด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือแล้วบันทึก

www.colorpack.co.th

สร้าง เทมเพลต Gallery

คลิ๊กเพื่อเข้าไปแก้ไข Category Layout

www.colorpack.co.th

สร้าง เทมเพลต Download

ลาก ฟิลด์ Images Show ด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือแล้วบันทึก

www.colorpack.co.th

สร้าง Category Gallery

คลิ๊กเมนู Category

สร้าง Category ใหม่

www.colorpack.co.th

สร้าง Category Gallery

ใส่ชื่อ Category ใหม่

เลือกเทมเพลต

www.colorpack.co.th

แก้ไข Type ให้ใช้เทมเพลต Gallery

คลิ๊กเมนู Type

คลิ๊กชื่อ Type Gallery เพื่อแก้ไข

www.colorpack.co.th

แก้ไข Type ให้ใช้เทมเพลต Gallery

เลือก Default Item layout เป็น เทมเพลต Gallery แล้ว บันทึก

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type Gallery

คลิ๊กเมนู Item

คลิ๊กเพื่อสร้างเนื้อหาใหม่

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type Gallery

เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก Type ให้เลือก Gallery

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type Gallery

ใส่ชื่อของเนื้อหา

เลือก Category

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Images Show

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Images Show

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Images Show

ช่องใส่คำอธิบายรูปควรใส่ทั้งสามช่องหากต้องการลบให้ติ๊ก

ช่องนี้แล้วบันทึก

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Gallery

สังเกตว่าฟิลด์นี้ใส่รูปได้หลายรูปเพราะ Gallery จากการคลิ๊กเลือก Acts as gallery เป็น Yes ในฟิลด์

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Gallery

เลือกอัพโหลดแบบ Multiple Upload

เลือกไฟล์ได้ทีละหลายไฟล์

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Gallery

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Gallery

คลิ๊กเพื่อเพิ่ม

จากนั้นคลิ๊ก Select Images

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Gallery

หลังจากใส่รูปไปแล้ว ให้คลิ๊กบันทึก

www.colorpack.co.th

สร้าง Menu ใหม่

* การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu

www.colorpack.co.th

สร้าง Menu ใหม่

www.colorpack.co.th

สร้าง Menu ใหม่

www.colorpack.co.th

ด้านหน้าเว็บ

www.colorpack.co.th

ปรับแต่งหน้าเว็บ Category Layout

ให้เข้าไปปรับแก้ ฟิลด์ Images show กำหนด Display Label เป็น No

และเปลี่ยนขนาดของ Thumbnail in Category View เป็น Medium

www.colorpack.co.th

ปรับแต่งหน้าเว็บ Item Layout

ให้เข้าไปปรับแก้ ฟิลด์ Images show กำหนด Display Label เป็น No

และเปลี่ยนขนาดของ Medium thumbnails เป็น 200x150 หรือตามขนาดที่ต้องการ

www.colorpack.co.th

สร้าง Type Staff เพื่อแสดงข้อมูลบุคลากร

www.colorpack.co.th

สร้าง Type Staff

คลิ๊กเมนู Type

สร้าง Type ใหม่

www.colorpack.co.th

สร้าง Type Staff

ใส่ชื่อของ Type

บันทึก

บุคลากร

www.colorpack.co.th

คลิ๊กเมนู Fields

สร้าง Field ใหม่

สร้าง Fields Staff

www.colorpack.co.th

สร้าง Fields แบบ Radio

เลือก Radio

www.colorpack.co.th

สร้าง Fields แบบ Checkbox

การใส่ข้อมูลจะต้องใส่เป็นรูปแบบที่กำหนด

ข้อมูลที่เก็บลงฐานข้อมูล

ข้อมูลที่แสดงคั่นด้วย ::

ปิดด้วย %% เว้นวรรค

www.colorpack.co.th

สร้าง Fields แบบ Date

เลือก Date

www.colorpack.co.th

สร้าง Fields แบบ Select

เลือก Select

www.colorpack.co.th

สร้าง Fields แบบ Select

ข้อมูลที่เก็บลงฐานข้อมูล

ข้อมูลที่แสดงคั่นด้วย ::

ปิดด้วย %% เว้นวรรค

การใส่ข้อมูลจะต้องใส่เป็นรูปแบบที่กำหนด

press_office::สำนักงบประมาณ%% fisheries_office::สำนักงานประมง%% statistical_office::สำนักงานสถิติ%% commercial_office::สำนักงานพาณิชย์%%

www.colorpack.co.th

สร้าง Fields แบบ Text

เลือก Text

www.colorpack.co.th

สร้าง Fields Images

เลือก images

www.colorpack.co.th

สร้าง เทมเพลต Staff Category

คลิ๊กเมนู Templates

คลิ๊กเพื่อ คัดลอกเทมเพลต

www.colorpack.co.th

สร้าง เทมเพลต Staff Item

คลิ๊กเมนู Templates

คลิ๊กเพื่อ คัดลอกเทมเพลต

www.colorpack.co.th

สร้าง เทมเพลต Staff Category

คลิ๊กเพื่อเข้าไปแก้ไข Category Layout

www.colorpack.co.th

สร้าง เทมเพลต Staff Category

www.colorpack.co.th

สร้าง เทมเพลต Staff Item

คลิ๊กเพื่อเข้าไปแก้ไข Items Layout

www.colorpack.co.th

สร้าง เทมเพลต Staff Item

www.colorpack.co.th

สร้าง Category บุคลากร

คลิ๊กเมนู Category

สร้าง Category ใหม่

www.colorpack.co.th

สร้าง Category บุคลากร

ใส่ชื่อ Category ใหม่

เลือกเทมเพลต

www.colorpack.co.th

แก้ไข Type ให้ใช้เทมเพลต staff-item

คลิ๊กเมนู Type

คลิ๊กชื่อ Type บุคลากร เพื่อแก้ไข

www.colorpack.co.th

แก้ไข Type ให้ใช้เทมเพลต staff-item

เลือก Default Item layout เป็น เทมเพลต staff-item แล้ว บันทึก

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type บุคลากร

คลิ๊กเมนู Item

คลิ๊กเพื่อสร้างเนื้อหาใหม่

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type บุคลากร

เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก Type ให้เลือก บุคลากร

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type บุคลากร

ใส่ชื่อของเนื้อหา

เลือก Category

www.colorpack.co.th

สร้าง Item ใหม่โดยใช้ Type บุคลากร

กรอกข้อมูลให้ครบถ้วน แล้วบันทึก

www.colorpack.co.th

สร้าง Menu ใหม่

* การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu

www.colorpack.co.th

สร้าง Menu ใหม่

www.colorpack.co.th

สร้าง Menu ใหม่

www.colorpack.co.th

ด้านหน้าเว็บ

www.colorpack.co.th

แก้ไขรูปแบบ Category ได้

www.colorpack.co.th

แก้ไขรูปแบบ การแสดงผลหน้า Item ได้ที่ type

www.colorpack.co.th

การใช้งาน โมดูล

www.colorpack.co.th

สร้างโมดูลใหม่

www.colorpack.co.th

สร้างโมดูลใหม่

www.colorpack.co.th

โมดูลของ Universal Content Module for FLEXIcontent มี 4 แบบ

www.colorpack.co.th

โมดูล Layout Carousel

www.colorpack.co.th

โมดูล Layout News

www.colorpack.co.th

โมดูล Layout Select โมดูล Layout Default

โมดูล Layout

www.colorpack.co.th

โมดูล Layout Select

FeaturedFeatured

Intro items Intro items

โมดูล Layout Newsโมดูล Layout Carousel

www.colorpack.co.th

การกำหนด ขอบเขตข้อมูลที่จะนำมาแสดง

แท็บ Item List: Select Items จะเป็นที่กำหนดขอบเขตของข้อมูลว่าจะเอาข้อมูลจาก Category ไหน

มาแสดง

www.colorpack.co.th

การกำหนด ขอบเขตข้อมูลที่จะนำมาแสดง

Category scope จะเป็นที่กำหนดว่าจะนำ เอา ข้อมูลจาก Category ไหนมาแสดง

www.colorpack.co.th

การกำหนด ฟิลด์ที่นำมาแสดง

Layout: Select fields จะเป็นที่กำหนดว่าจะนำ เสนอขอ้มูลอย่าไร เช่น แสดง วันที่ กำหนดขนาดรูป

กำหนดความยาวชื่อ เป็นต้น

www.colorpack.co.th

การกำหนด ฟิลด์ที่นำมาแสดง

กำหนดการเปิดปิด รูปแบบของ วันที่ได้

www.colorpack.co.th

กำหนดการเปิดปิดHits และ Vote

การกำหนด ฟิลด์ที่นำมาแสดง

www.colorpack.co.th

สามารถเลือกรูปมาแสดงได้ นอกจากนั้นยังกำหนดขนาดเองได้

การกำหนด ฟิลด์ที่นำมาแสดง

www.colorpack.co.th

การกำหนด รูปแบบของแต่ละ Layout

เมื่อเราเลือก Layout ใดๆ จะมีการตั้งค่าของแต่ละ Layout

www.colorpack.co.th

การกำหนด รูปแบบของแต่ละ Layout

www.colorpack.co.th

การกำหนด รูปแบบของแต่ละ Layout

เมื่อเราเลือก Layout ใดๆ จะมีการตั้งค่าของแต่ละ Layout

www.colorpack.co.th

การกำหนด รูปแบบของแต่ละ Layout

www.colorpack.co.th

รู้จักฟิลด์ แต่ละชนิด

www.colorpack.co.th

Field type - Radio : การใช้งาน

ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้เพียง ตัวเลือกเดียว

www.colorpack.co.th

Field type - Radio : การตั้งค่า

ข้อมูลที่เก็บลงฐานข้อมูล

ข้อมูลที่แสดงคั่นด้วย ::

ปิดด้วย %% เว้นวรรค

www.colorpack.co.th

Field type - Radio Images : การใช้งาน

ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้เพียง ตัวเลือกเดียว แต่จะใช้รูปมาเป็นตัวเลือกแทน

www.colorpack.co.th

Field type - Radio Images : การตั้งค่า

ข้อมูลที่เก็บลงฐานข้อมูล ชื่อรูปคั่นด้วย

::ปิดด้วย %

% เว้นวรรคชื่อข้อมูล คั่นด้วย ::

สร้างโฟลเดอร์ใส่รูปแล้วนำรูปมาใส่ตามที่ตั้งค่า

www.colorpack.co.th

Field type - Checkbox : การใช้งาน

ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้หลายข้อ หรือหลายตัวเลือก

www.colorpack.co.th

Field type - Checkbox : การตั้งค่า

ข้อมูลที่เก็บลงฐานข้อมูล

ข้อมูลที่แสดงคั่นด้วย ::

ปิดด้วย %% เว้นวรรค

www.colorpack.co.th

Field type - Radio Images : การใช้งาน

ฟิลด์ Radio Images จะเป็นแบบตัวเลือกซึ่งจะเลือกได้หลายตัวเลือก แต่จะใช้รูปมาเป็นตัวเลือกแทน

www.colorpack.co.th

Field type - Radio Images : การตั้งค่า

ข้อมูลที่เก็บลงฐานข้อมูล ชื่อรูปคั่นด้วย

::ปิดด้วย %

% เว้นวรรคชื่อข้อมูล คั่นด้วย ::

สร้างโฟลเดอร์ใส่รูปแล้วนำรูปมาใส่ตามที่ตั้งค่า

www.colorpack.co.th

Field type - Select : การใช้งาน

ฟิลด์ Select จะเป็นแบบตัวเลือกแบบหนึ่งตัวเลือก เหมาะกับการใช้งานที่มีข้อมูลมากๆ เช่น ตัวเลือกจังหวัด

www.colorpack.co.th

Field type - Select : การตั้งค่า

ข้อมูลที่เก็บลงฐานข้อมูล

ข้อมูลที่แสดงคั่นด้วย ::

ปิดด้วย %% เว้นวรรค

www.colorpack.co.th

Field type - Select Multiple : การใช้งาน

ฟิลด์ Select จะเป็นแบบตัวเลือกแบบเลือกได้หลายตัวเลือก เช่น ชอบรถอะไร

www.colorpack.co.th

Field type - Select Multiple : การตั้งค่า

ข้อมูลที่เก็บลงฐานข้อมูล

ข้อมูลที่แสดงคั่นด้วย ::

ปิดด้วย %% เว้นวรรค

www.colorpack.co.th

Field type - File : การใช้งาน

ฟิลด์ file จะเป็นฟิลด์ที่ใช้ทำระบบ ดาวน์โหลด โดยสามารถอัปโหลดไฟล์ขึ้นไปหรือใส่ URLไฟล์ ก็ได้

www.colorpack.co.th

Field type - File : การใช้งาน

คลิ๊ก เลือกไฟล์จากเครื่อง

ใส่ชื่อไฟล์ ใส่รายละเอียดไฟล์

อัปโหลดไฟล์

www.colorpack.co.th

Field type - Image or Gallery : การใช้งาน

ฟิลด์ Image or Gallery จะเป็นฟิลด์ที่ใช้ ใส่รูป หนึ่งรูปหรือใส่หลายรูปเพื่อทำ Gallery

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Images แบบรูปเดียว

www.colorpack.co.th

ใส่รูปลงในฟิลด์ Images แบบหลายรูป

เลือกอัพโหลดแบบ Multiple Upload

เลือกไฟล์ได้ทีละหลายไฟล์

www.colorpack.co.th

Field type - Mini Gallery : การใช้งาน

ฟิลด์ Mini Gallery จะเป็นฟิลด์ที่ใช้ ใส่รูป ใส่หลายรูปเพื่อทำ Gallery

www.colorpack.co.th

Field type - Mini Gallery : การแสดงผล

www.colorpack.co.th

Field type - Shared Video : การใช้งาน

ฟิลด์ Shared Video จะเป็นฟิลด์ที่ใช้ ใส่วีดีโอจากเว็บต่างๆ

เช่น YouTube,Vimeo,D

ailyMotionโดยใส่ URL ลงไปแล้วกด Fetch ข้อมูล

จะมาเอง

www.colorpack.co.th

Field type - Date : การใช้งาน

ฟิลด์ Date จะเป็นฟิลด์ที่ใช้ ใส่วันที่

www.colorpack.co.th

Field type - Text : การใช้งาน

ฟิลด์ Text จะเป็นช่องให้ใส่ข้อความสั้นๆ

www.colorpack.co.th

Field type - Text Area : การใช้งาน

ฟิลด์ Text Area จะเป็นช่องให้ใส่ข้อความขนาดใหญ่และใส่รูปภาพหรือ HTMLได้ หากอยากเปิดใช้

HTML Editor เปิดตามรูป

www.colorpack.co.th

Field type - Weblink : การใช้งาน

ฟิลด์ Weblink จะเป็นช่องให้ใส่ URL และสามารถใส่ได้หลายช่อง โดยไปเปิดตามรูป

www.colorpack.co.th

Field type - Relation : การใช้งาน

ฟิลด์ Relation จะเป็นฟิลด์ที่จะแสดงรายชื่อบทความ ที่เกี่ยวข้องโดยเราจะเป็นคนเลือกเอง โดยเลือก

บทความจากซ้ายมือ กด +

www.colorpack.co.th

ตั้งค่าปรับแต่งเพิ่มเติม

www.colorpack.co.th

ซ่อนการแสดง Maintext field

บาง Type เราจะไม่ได้ใช้ช่องใส่ข้อความใหญ่ๆ เราสามารถไปปิดได้ที่ Type ดังรูป

www.colorpack.co.th

แก้ไข ป้าย Title

ปรกติจะเป็น Title

ต้องการเปลี่ยนเป็น ชื่อ-นามสกุล ให้ไปเปลี่ยนที่

Type นั้นๆ

www.colorpack.co.th

ใส่ชื่อให้ Tab

ต้องการเปลี่ยนชื่อ Tab ให้ไปเปลี่ยนที่ Type นั้นๆ