Issuu on Google+

wordpress themes Desing by Mr.arnon Tongrod


â´Â : ¹ÒÂÍÒ¹¹· ·Í§ÃÍ´ ÃËÑʹѡÈÖ¡ÉÒ : 5211302434 ËÁÙ‹àÃÕ¹ ÈȺ 521(4)/13A ¡ÅØ‹ÁàÃÕ¹ :102 Çѹ¾ÄËÑʺ´Õ 13.00¹.ÇÔªÒ: Visual Communication Design ÃËÑÊÇÔªÒ ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


wordpress theme Design 1

คำนำ รายงาน เล่มนี้เป็นส่วนหนึ่งของรายวิชา Visual Communication Design Arti3319 เพื่อเป็นการสรุปการเรียนรู้เกี่ยวกับการศึกษา ทำ เวิร์ดเพรสเว็บบล็อกที่แก้ไขปรับปรุง โดยนายอานนท์ ทองรอด เนื้อหาบล็อกประกอบไปด้วยข้อมูลส่วนตัวและประวัติการ ศึกษารวมถึงงานด้านการศึกษาต่างๆ เพื่อการมีส่วนร่วมพัฒนาใดๆในระบบนี้ เป็นส่วนหนึ่งในงานศึกษาวิจั ยในโครงการ การศึกษาพัฒนาสื่อและระบบสนับ สนุนการเรียนการสอนออนไลน์ ของสาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม

จัดทำโดย นายอานนท์ ทองรอด วันที่ 05/03/2555 นักศึกษาศิลปกรรมสาขาออกแบบนิเทศศิลป์

โดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันพฤหัสบดี 13.00น.วิชา: Visual Communication Design รหัสวิชา ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


2 wordpress theme Design

สารบัญ

เรื่อง

หน้า

ขั้นตอนการทำ Wordpress themes Desing 5. การเขาระบบ Aamin 6. การ Downlond และ themes Design 7. การทำภาพพื้นหลัง 8. การทำส่วนหัว Wordpress themes 9. การติดตั้งโปรแกมเสริม 10-12.

โดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันพฤหัสบดี 13.00น.วิชา: Visual Communication Design รหัสวิชา ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


wordpress theme Design 3

โดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันอังคาร 13.00น. วิชา: Animation Design รหัสวิชา ARTI3322 Blogger : http://arnon-arti3322.blogspot.com/ E-mail : arnontongrod@gmail.com ขั้นตอนการทำ Wordpress themes Desing

ขั้นตอนที่ 1 ให้เราเปิดโปรแกมใน แฟรสไดร์ขั้นมาคือ WordPressThai3.3.1Portable-AcademyVersionเพื่อจะทำการเขาระบบ หลังจากนั้น เขาไปคลิกที่ usbwebserver เพื่อจะทำการ เขาระบบ localhost เพื่อเข้าสู่หน้าระบบ เมื่อเขาสู่localhostจะปรากฎหน้า wabนี้ขึ้นมา ให้คลิกที่ http://localhost:8080/wordpressthaiedition/ เพื่อเขาสู่ระบบ admine

โดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันพฤหัสบดี 13.00น.วิชา: Visual Communication Design รหัสวิชา ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


4 wordpress theme Design

เมื่อคลิกเขามาแล้วจะปรากฎหน้านี้เพื่อทำการเขา admin เพื่อเขาไปทำการแก้ไขและทำการ เปลี่ยthemes และอัปเดชข้อมูลต่างๆ

ขั้นตอนต่อมาเราจะทำการ Downlond wobthemes ที่จะนำมาใช้ในการออกแบบหรือ เราจะเลืกใช้ตะว themesที่มีอยู่ก็ได้

เมื่อเราเลือก themes เรียบร้อยแล้ว ให้เราDownlond มาไว้ในเครื่อง ในที่นี้เราใช้ Wob www.freewptheme.net และ www.wordpress.org หลังจากที่ ได้ไฟล์ที่เป็นไฟล์ Zip ,แล้วให้ทำการแตกไฟล์

โดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันพฤหัสบดี 13.00น.วิชา: Visual Communication Design รหัสวิชา ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


wordpress theme Design 5

แล้วลากโฟนเดอร์ เขาไปไว้ใน root -wordpressthaiedition-wp-content-themes เมื่อเรา ลากโฟรเดอร์ที่เรา ไปไว้ในโฟนเดอร์root -wordpressthaiedition -wp-content-themes เรียบร้อยแล้วเมื่อเราเขาไปดูในระบบ admin จะปรากฎหน้านี้ขึ้นมา

เมื่อเราได้ themes มาแล้วให้เราคลิกเลือก theme ที่เรา downlond มาเพื่อใช้งาน ขั้นตอนต่อไปจะเป็นการปลับแต่ wab themes Design ขั้นแรกเราจะทำการเปลี่ยนพื้นหลังของwab themes Design ครับโดยเราจะทำภาพพื้นหลังด้วย โปรแกม Adobe Phptoshop CS3

นี้คือหน้า wabthemes ที่เราเลือกมาเพื่อที่จะใช้ในการทำ Design wabthemes เราจะเขาสู่ขั้นต้อนการ ทำพื้นหลังด้วยโปรแกมAdobe Phptoshop CS3 โดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันพฤหัสบดี 13.00น.วิชา: Visual Communication Design รหัสวิชา ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


6 wordpress theme Design

ภาพขั้นตอนการ การทำ ไื้นหลัง ของ Wordpress ขนาดความกว้าของ wordpress 1366 pix x 768 pix เมื่อเราทำการพื้นหลังและsaveเป็นไฟล์ JPG ที่ความละเอียด 72pix เมื่อเราทำการ บรรทึกเรียบร้อยแล้ว ขั้นตอนต่อมาเราจะทำการใส่พื้นหลัง ของWordpress

ขั้นตอนการใส่พื้นหลังนั้นสามารถทำได้สองวิธี คือวิธีที่ 1 คือการแทนที่เขาไปในโฟนเดอร์ ของ themes root -wordpressthaieditionwp-content-themes -twentyten-imagesพื้นหลักก้จะเปลี่ยน และขั้นตอนที่ 2 ให้เราเขาไปเปลี่ยนใน wordpress ได้เลย โดยการเขาไปที่ การออกแบบกราฟฟิก-สีพื้นหลัง และเมื่อเลือกไฟล์และอัปโหลขั้นมาแล้วโปรแกมจะให้เราตั้ง ค่าของพื้นหลัง หลังจากนั้นเราจะมาทำส่วนหัวของ wordpress ส่วนหัวของ Wordpress นั้น จะมีขนาด 940pix x 198 pix เราจะทำส่วนหัวนี้Adobe Phptoshop CS3 ใ นส่วนหัวนี้เราจะใส่รายละเอียดของ theme ด้วยเช่นเดียวกันกับพื้นหลัง เมื่อเรา ทำส่วนหัวเรียบร้อยแล้ว เราจะทำการนำขึ้น wordpress เราด้วย 2 วิธีเช่นกัน ขั้นตอนการใส่พื้นหลังนั้นสามารถทำได้สองวิธี คือวิธีที่ 1 คือการแทนที่เขาไปในโฟนเดอร์ ของ themes root -wordpressthaieditionโดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันพฤหัสบดี 13.00น.วิชา: Visual Communication Design รหัสวิชา ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


wordpress theme Design 7

wp-content-themes -twentyten-images-handder ส่วนหัวก็จะปรากฎขั้นมา และขั้นตอนที่ 2 ให้เราเขาไปเปลี่ยนใน wordpress ได้เลย โดยเขา ไปที่การออกแบบกราฟฟิก-ปรับแต่งรูปแบบส่วนหัว ส่วนหัวดังภาพด้านล่าง

นี้คือส่วนหัว ของ wordpress design ที่เสร็จสมบูรณ์แล้ว ขั้นตอนต่อมาเมื่อเราได้ พื้นหลัง และส่วนห้วแล้วเรา จะมาทำการ ติดตั้ง สไลด์กันต่อครับ ขั้นตอนที่ 1 ให้เราไป Downlond Progame ที่ใช้ทำสไล์มาครับ ในที่นี้ก็มีโปรแกมอญุ่หลายตัวครับ ตามแต่เราเราจะเลืกใช้ เช่น V-slide และ SlideDeck,smood-slide ในที่นี้เราเลืกใช้โปรแกม SlideDeckที่เป็นสไล์ในตัว Blog ที่เขียนบทความพร้อม มี code ที่สะดวกในการติดตั้ง ขั้นตอนที่ 1 ให้เราทำการ Downlond ProgameSlideDeck มาได้เลยครับ เมื่อ Downlond Progame ไม่ต้องแตกไฟล์ออกครับ ให้เราทำการติดตั้ง บน wordpress ได้เลย โดยเขาไปที ่

โดยเขาไปที่การติดตังโปรแกมเสริมและเลือกที่คำว่า เพิ่ม ใหม่เพื่อส่งไฟล์ขั้นหลังจากนั้นให้ทำการ กดคำว่าติดตั้งทันที

โดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันพฤหัสบดี 13.00น.วิชา: Visual Communication Design รหัสวิชา ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


8 wordpress theme Design

หลังจากนั้นให้กดคำว่า เปิกการใช้งานโปรแกมเสริม ตัวโปรแกมที่เราติดตั้งก็จะอยู่บริเวณด้านข้าง ตัวโปรแกมที่ติดตั้งด้านข้างของแทบเครื่องมือพร้อมที่จะใช้งานการใช้งานโปรแกม ประโยชน์ของสไลด์ที่เรากำลังจะทำนะครับ ลองคิดกันง่ายๆว่ามีอะไรกันบ้าง ข้อแรก มันทำให้เว็บหรือบล็อกบอกเรามันดูน่าสนใจยิ่งขึ้นครับ ข้อสอง มันทำให้ผู้อ่านได้ทราบว่าเรากำลังแสดงหรือกำลังประชาสัมพันธ์อะไรอยู่ ข้อสาม ทำให้สามารถแทรกโฆษณาหรือทำให้มีรายได้เกิดขึ้นก็เป็นได้ เอามาแค่ 3 ข้อก่อนครับ ใครมีข้อดีที่ดีกว่านี้ หรือว่ามีข้อเสียแบบไหนก็เอามาแบ่งปันกันได้ครับ มาถึงวิธีใช้กันบ้าง ก่อนอื่นต้องไปโหลดเจ้าปลั๊กอินที่ชื่อ SlideDeck มาก่อนครับ สามารถดาวน์โหลดได้ที่นี่ Download SlideDeck Plugin WordPress โหลดกันเสร็จแล้วให้ใช้งานทันทีครับ จากนั้นก็ไปที่จากนั้นก็จะเจอการปรับแต่งของปลั๊กอินตัวนี้ครับ การใช้งาน SlideDeck มี 2 แบบ คือ แบบที่ 1 เราจะสามารถตกแต่งและทำสไลด์เอง ในส่วนนี้ให้เลือกที่เมนู SlideDeck > Add แบบที่ 2 ปลั๊กอินจะสุ่มเรื่อง หรือ เรียงลำดับมาแสดงเอง ในส่วนนี้เลือกไปที่เมนู Slide Deck > Add Smart Slide Deck การนำไป SlideDeck ไปใช้งาน หากเราต้องการให้ปลั๊กอินตัวนี้ไปโชว์ที่ส่วนไหนของบล็���ก มีวิธีง่ายๆครับ โดยการนำโค๊ดที่ได้รับไปใส่ในส่วนที่ต้องการ แบบนี้ โดยโค๊ดจะสามารถดูได้จาก Theme Code Snippet ที่อยู่ทางขวามือหลังจากที่เรากด Save แล้ว แบบนี้

หน้าต่างโปรแกมที่เราติดตั้ง Downlond ProgameSlideDeck และเป็นหน้าต่างที่เสร็จสมบูรณ์ และเราสามารถสร้างหน้าต่างเพิ่มได้อีกตามที่เราต้องการ เช่น หน้าหลัก Abou me และอีกหลายอย่าง

โดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันพฤหัสบดี 13.00น.วิชา: Visual Communication Design รหัสวิชา ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


wordpress theme Design 9

บรรณานุกรม ( ๑ ) เว็บไซต์ http://notezii.com/archives ( ๒ ) เว็บไซต์ http://wordpressthaiedition.blogspot.com/ โดยผศ.ประชิด ทิณบุตร Font Designer By Mr.Arnon tongrod font name CRU-ArnonTG

โดย : นายอานนท์ ทองรอด รหัสนักศึกษา : 5211302434 หมู่เรียน ศศบ 521(4)/13A กลุ่มเรียน :102 วันพฤหัสบดี 13.00น.วิชา: Visual Communication Design รหัสวิชา ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


CHANDRASEM RAJABHAT UNIVERSITY

â´Â : ¹ÒÂÍÒ¹¹· ·Í§ÃÍ´ ÃËÑʹѡÈÖ¡ÉÒ : 5211302434 ËÁÙ‹àÃÕ¹ ÈȺ 521(4)/13A ¡ÅØ‹ÁàÃÕ¹ :102 Çѹ¾ÄËÑʺ´Õ 13.00¹.ÇÔªÒ: Visual Communication Design ÃËÑÊÇÔªÒ ARTI3319 Blogger : http://arnon-arti3319.blogspot.com/E-mail : arnontongrod@gmail.com


arnon-arti3319-102-wordpress design