Wordpress 3.5.1โดย สำ��นักวิ�ทยบริ�ก�ริและเทคโนัโลย�สำ�ริสำนัเทศมห�วิ�ทย�ลยเทคโนัโลย�ริ�ชมงคลพริะนัคริ

Introduction Website

•Domain•URL•Server•Client•Browser•Database

•MySQL•PHP•ASP, ASP.NET•HTML•Javascript•CSS

Website LayoutHEADER

TOP MENU / NAVIGATION

CONTENT SIDEBAR

FOOTER

Introduction CMS (Content management system)• ไม�จำ��เป็ นัต้"องม�ควิ�มริ$"เริ%&องก�ริเขี�ยนั Website •ลดริะยะเวิล�ในัก�ริพฒนั� Website•ง��ยต้�อก�ริด$แล แก"ไขี ป็ริบเป็ล�&ยนัหนั"�ต้� Website

ง��ยๆด"วิย Theme•ม�ล$กเล�นัท�&สำ�ม�ริถต้�ดต้,งเพ�&มเต้�มได" เช�นั ริะบบ

Gallery

•กริณี�ต้"องก�ริออกแบบหริ%อเป็ล�&ยนัแป็ลง Theme จำะต้"องใช"ควิ�มริ$"ม�กกวิ��ป็กต้�

•ต้"องศ.กษ�ริะบบและวิ�ธี�ก�ริใช"ง�นั CMS •อ�จำจำะม�ควิ�มย1�งย�กในัก�ริต้�ดต้,ง CMS ลงในั

Server

Introduction Wordpress

Introduction Wordpress (2)

• เป็�น Software ป็ระเภท CMS สำ��หร�บสำร��ง Blog หร�อ Website

• ได้�ร�บคว�มน�ยมสำ�งสำ�ด้ในขณะน !•พั�ฒน�ด้�วยภ�ษ� PHP ท��ง�นบนฐ�นข�อม�ล MySQL•Website หล�ก http://wordpress.org• ใช้�ง�นง)�ยม�ก•พั�ฒน�บนพั�!นฐ�นของ Web Standard

Wordpress Showcase

•wordpress.org/showcase/•www.rmutp.ac.th

Wordpress Showcase (2)

Preparation for Wordpress Install•Download Appserv ▫http://www.appservnetwork.com/

Apache PHP MySQL phpMyAdmin

•Download Wordpress▫http://wordpress.org/download/

Wordpress Requirement

•To run WordPress your host just needs a couple of things:▫PHP version 5.2.4 or greater▫MySQL version 5.0 or greater▫The mod_rewrite Apache module (Optional)

•The requirements have changed as of WordPress 3.2. The minimum requirements for WordPress 3.1 are PHP 4.3 and MySQL 4.1.2.

Install Appserv & Wordpress

Install Appserv

Create Database

Copy & Paste Wordpress

Install Wordpress

Front Site & Wp-admin

Front Site

Wp-admin

Wordpress Important Setting•Site Title•Tagline•Time zone•Default article settings•E-mail me whenever•Allow search engines to index this site.•Permalink Settings

What’s Post ?

Post

Category 1

Category 2

Tag 1

Tag 2

Tag 3

Post

Publish Post

Edit Post

Post LocationHEADER

TOP MENU / NAVIGATION

CONTENT SIDEBAR

FOOTER

Post 1

Post 2

Post 3

New

Old

Add New Post

•Title•Content•Category•Tag

Insert Link

Lab 1, Add New Post

•สำร��ง New Post• ใสำ) Title• ใสำ) Content▫Bold▫Italic▫Link

•ตั้�!งค)� Category•ตั้�!งค)� Tag

Upload Media (Image, PDF, Ect.)

Lab 2, Edit Post

•แก�ไข Post (“Basic Html Tag”)•แก�ไข Content โด้ยเพั�-ม▫ใสำ) Image▫ทด้ลองใช้� Paragraph(Enter)

และ Line Break(Shift+Enter)▫ใสำ) List

Post with Gallery

Lab 3, Post with Gallery

•สำร��ง New Post• ใสำ) Title, Category, Tag•Upload 6+ Images▫Set Title, Alternate Text,

Caption, Description•แทรกร�ป็ท�!งหมด้แบบ Gallery

Post with Gallery + Plugin (Fancybox Plus)

Basic Html Tag

•<strong>Bold</strong> (<b>)•<em>Italic</em>•<a href=“http://www.rmutp.ac.th”>Link to

Rmutp</a>•<img

src=“http://www.rmutp.ac.th/logo.jpg” alt=“Rmutp Logo” />

•<p>Paragraph</p>•Line<br />break•<h1>Head Subject</h1> (h1-h6)•<ol>, <ul>, <li>

Post with Table

• โด้ยป็กตั้� Wordpress ไม)ม เคร�-องม�อช้)วยในก�รสำร��ง Table

•ว�ธี ก�รสำร��งตั้�ร�ง▫ใช้� Table Tag (ม คว�มร� �เร�-องก�รเข ยน Html)▫ใช้� Plugin (WP-Table Reloaded)▫Copy & Paste จ�กเคร�-องม�ออ�-นเช้)น MS Word

(อ�จจะม ก�รตั้�!งค)�ของ Table ท -ไม)ตั้�องก�รตั้�ด้พั)วงม�ด้�วย)

Table Tag

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table>

Month

Savings

January

$100

Table by WP-Table Reloaded

Lab 4, Post with Table

•สำร��ง New Post• ใสำ) Title, Category, Tag• ใสำ) Table ลงใน Content โด้ยใช้� Table Tag หร�อ

Plugin

Manage Post

Media Library

Page

Page Location

HEADER

TOP MENU / NAVIGATION

CONTENT SIDEBAR

FOOTER

Page 1 Page 2 Page 3

Page 4Page 5Page 6

Lab 5-1, Add New Page

•สำร��ง New Page • ใสำ) Title “About Us”• ใสำ) Content▫Upload PDF ▫Link to PDF file

Front page displays (Static page)

Lab 5-2, Static Page

•Reading Setting▫Select a static page (Front Page = “Sample

Page”)•ด้�ผลก�รเป็ล -ยนแป็ลง•แก�กล�บเป็�น “Latest Posts”

Menu and Navigation

Lab 6, Top-Menu

•สำร��งกล�)ม Menu ท -ช้�-อ “Top-Menu”• ใสำ) Menu ด้�งน !▫Home▫About Us▫ร�ช้มงคลพัระนคร

คณะท�!ง 9• ใสำ) “Top-Menu” ลงใน Theme Locations

Sidebar and Widget

Standard Widget

•Archives•Calendar•Categories•Custom Menu•Links•Meta•Pages•Recent

Comments•Recent Posts•RSS•Search•Tag Cloud•Text

Widget LocationHEADER

TOP MENU / NAVIGATION

CONTENT SIDEBAR

FOOTER

Widget 1

Widget 2

Lab 7, Sidebar

• ใสำ) Widget ท�!งหมด้ยกเว�น (RSS และ Text) ลงใน Sidebar

•ด้�ว)�ในแตั้)ละ Widget แสำด้งผลอะไรบ��ง

RSS

•Really Simple Syndication (RSS 2.0)•ค�อ บร�ก�รข�อม�ลบน Internet เช้)นข)�วสำ�ร

โด้ยจะอย�)ในร�ป็แบบ XML•Widget RSS ค�อ Widget ท -ท��ก�รอ)�นข)�วสำ�ร

จ�กเว1บท -ให�บร�ก�ร RSS ม�แสำด้งบน Widget

Lab 8, RSS

• ใสำ) Widget RSS ลงใน Sidebar•ตั้�!งค)� RSS Feed URL เป็�น▫http://www.rmutp.ac.th/feed/

•ตั้�!งค)� Feed Title•ตั้รวจสำอบข)�วสำ�รจ�กก�รแสำด้งผลของ

Widget RSS•ทด้ลองใช้� RSS จ�กท -อ�-น

Widget Text

•สำ�ม�รถใสำ)ข�อคว�มใด้ๆ หร�อ Html ลงใน Widget• เช้)นก�รแทรกร�ป็ลงใน Widget

Widget Text

Lab 9, Widget Text

• ใสำ) Widget Text ลงใน Sidebar• ใสำ) Widget Title• ใสำ) Widget Content

Introduction Theme•Theme ค�อตั้�วก��หนด้ ร�ป็ร)�งหน��ตั้� และก�รแสำด้งผล

ตั้)�งๆ ของ Website•Download New Theme

“http://wordpress.org/extend/themes/”•ม ท�!งแบบ Free และ Commercial•ก�รป็ร�บแตั้)งเป็ล -ยนแลง Theme▫Theme Option, Header, Background (ห�ก

Theme สำน�บสำน�น)▫Edit Theme ด้�วยก�รแก�ไข Script (Html, CSS,

Java Script, PHP)

Theme Option (Twenty Eleven)

Background

Header

Lab 10, Theme Option, Background, Header•ทด้ลองเป็ล -ยน Theme Option▫Color Scheme, Link Color, Default Layout

•Background▫Upload Image Background▫ป็ร�บแตั้)ง Display Options (Position, Repeat,

Attachment, Background Color)•Header

ThemeWebsite Theme

Default Wordpress Twenty Eleven

ร�ช้มงคลพัระนครสำถ�บ�นว�จ�ย

คณะสำถ�ป็4ตั้ยกรรมศ�สำตั้ร6และก�รออกแบบคณะคร�ศ�สำตั้ร6อ�ตั้สำ�หกรรม

Arrass-theme

คณะอ�ตั้สำ�หกรรมสำ�-งทอและออกแบบแฟช้�-น Mystique

กองนโยบ�ยและแผน zeeSynergie

Install Theme

•สำ�ม�รถค�น free theme ใน “http://wordpress.org/extend/themes/”

•ก�รตั้�ด้ตั้�!งท��ได้� 2 ว�ธี ▫Download และ Install ผ)�น wp-admin▫Download และ Install ด้�วยตั้นเอง

ใน “wp-content\themes”•Activate Theme

Lab 11, Install “Admired” Theme•Search “Admired” Theme• Install “Admired” Theme•Activate “Admired” Theme•ด้�ก�รเป็ล -ยนแป็ลง

Admired Theme Options

Lab 12, Admired Theme Options•Skin & Layout•General Appearance▫Post Excerpt with Thumbnail▫Remove Post Calendar

•Font Options•Header•Footer

Lab 13, Install “Arras” Theme•Download Theme

“http://www.arrastheme.com/”•Extract, Paste in “\wp-content\themes”•Activate “Arras” Theme•ด้�ก�รเป็ล -ยนแป็ลง

Arras LayoutHEADER

TOP MENU / NAVIGATION

CONTENT SIDEBAR

FOOTER

Slide Show (Post1, Post2, Post3…)

Post 4 Post 5 Post 6

Post 7 Post 8 Post 9

Arras Options

Lab 14, Arras Options

•Slideshow•Featured Post #1-2•News Posts•Layout•Design•Thumbnail Sizes

Introduction Plug-in

•ค�อสำ)วนเสำร�ม สำ��หร�บเพั�-ม function ก�รท��ง�นของ Wordpress ให�ตั้รงก�บคว�มตั้�องก�รม�กย�-งข8!น

•ป็4จจ�บ�น Plugin ของ Wordpress ม ให�เล�อกม�กม�ย และตั้อบสำนองคว�มตั้�องก�รในท�กๆ ร�ป็แบบ

•ค�นห� Plugin และ Download ได้�ท - “http://wordpress.org/extend/plugins/”

Recommend Plug-in

•Akismet•All in One SEO Pack•WPtouch•WP-PageNavi•Google XML Sitemaps•SEO Friendly Images

•Breadcrumb NavXT•WP-Table Reloaded•Simple Facebook Connect•Smart YouTube PRO•And More….

Lab 15, Smart YouTube PRO

•Search “Smart YouTube PRO” Plugin• Install “Smart YouTube PRO” Plugin•Activate “Smart YouTube PRO” Plugin•ว�ง Link Video ของ Youtube ลงใน New Post▫httpv:// - regular video▫httpvh:// - high/HD quality

Web Statistic

•Google Analytic•Plug-in

Search Engine

•ค�อ เคร�-องม�อสำ��หร�บค�นห�ข�อม�ลท -อย�)บนอ�นเตั้อร6เน1ตั้ ด้�วยค��ค�นตั้)�งๆ

• โด้ยป็กตั้�แล�ว Search Engine จะม เคร�-องม�อท -ช้�-อว)� Robot (ห�)นยนตั้6) ในก�รสำ�บค�นเว1บไซตั้6ตั้)�ง ๆ เพั�-อน��ม�จ�ด้เก1บในระบบฐ�นข�อม�ลด้�วยก�รท�� Index โด้ย Robot จะเด้�นท�งจ�กเว1บหน8-ง ไป็อ กเว1บหน8-งผ)�น Hyperlink ท -ม อย�)ในเว1บไซตั้6น�!นๆ

Introduction SEO

•SEO (Search Engine Optimization) ค�อ ก�รป็ร�บแตั้)ง Website และกระบวนก�รตั้)�งๆ ของ Website ตั้�!งแตั้)ก�รออกแบบ เข ยนโป็รแกรม และก�รโป็รโมทเว1บ เพั�-อให�ตั้�ด้อ�นด้�บตั้�นๆ ของ Search Engine

Google PageRank

•Google Pagerank หร�อ PR ค�อ ค)�ล��ด้�บคะแนนท - Google ป็ระเม�นให�ก�บค�ณภ�พัของเน�!อห� ในหน��เว1บเพัจแตั้)ละหน�� ท -ป็ร�กฎอย�)ในเว1บไซตั้6 (หล�ย ๆ คนอ�จเข��ใจผ�ด้ว)� Pagerank ค�อ ก�รป็ระเม�นคะแนนของท�!งเว1บไซตั้6 ซ8-งเป็�นคว�มเข��ใจท -ผ�ด้นะคร�บ) โด้ยคะแนนท -ป็ร�กฎจะอย�)ในช้)วงระหว)�ง 0 ถ8ง 10 สำ��หร�บหน��เว1บเพัจท -ไม)ม ค)� Pagerankระบบจะแจ�งเป็�น “No PageRank information available”

PageRank Checker

Website Page Rankhttp://

www.rmutp.ac.th6/10

http://www.rmutt.ac.th

8/10

http://www.ku.ac.th 7/10http://

www.chula.ac.th8/10

http://www.prchecker.i

nfo

Check on 02/02/2555

SEO Friendly Content

•Keyword▫Domain, URL (Permalink Settings)▫<title></title>▫<h1>, <h2>, <h3> - <h6>▫เน�!อห�ในบทคว�ม▫<img src=“…” alt=“keyword” />

Wordpress SEO Plug-in

•All in One SEO Pack•Google XML Sitemaps•SEO Friendly Images

Back Link

•ค�อ Link ท -สำ)งกล�บม�ห�เว1บเร� Backlink เป็�นสำ)วนหน8-งของก�รท�� SEO ท -ข�ด้ไม)ได้�เลย เพัร�ะย�-งม Link เข��ม�ท -เว1บเร�เยอะๆ ก1เหม�อนก�บเป็�นก�รบอกว)� เว1บเร�น�!นสำ��ค�ญแค)ไหน ได้�ร�บก�รยอมร�บจ�กเว1บอ�-นๆเพั ยงใด้

Manage Wordpress User