Tag: wordpress

Plugin WordPress : Social Metrics

Plugin ที่มาแนะนำในครั้งนี้ จะรวมข้อมูลว่ามีคนกด Like มีคน tweet หรือมีคนกด +1 ให้แต่ละ Post ของเราเป็นจำนวนเท่าไหร่ โดยมีลักษณะหน้าตาเป็นแบบนี้ครับ

หน้าตาของ Social Metrics

โดยเมื่อเราดาวน์โหลด Plugin มาติดตั้งแล้ว จะปรากฎเมนูที่ด้านซ้ายแถว ๆ หัวข้อ Dashboard ของเรา

เมนูของ Social Metrics

ในส่วน Settings ของ Plugin มีหน้าตาเป็นแบบนี้

Settings ของ Social Metrics

แต่ในเวอร์ชั่นที่เราใช้อยู่จะเป็นแบบฟรี ทำให้ปรับแต่งให้งานอะไรไม่ได้มาก ซึ่งทาง Social Metrics จะมีแบบ Pro ให้เราได้ใช้งานในราคา 69.90 USD

ถ้าใครสนใจจะดาวน์โหลดมาใช้งาน ก็ไปที่หน้า Plugin ของ Social Metrics ตามนี้เลยครับ

Plugin WordPress : Social Metrics

December 5, 2011
เนื้อหาตัวอย่างสำหรับเช็ค WordPress Theme ที่เราติดตั้ง

ในการติดตั้ง หรือสร้าง WordPress Theme ขึ้นมานั้น เราสามารถเช็คการใช้งานในส่วนของการแสดงผลเนื้อหาต่าง ๆ ได้โดยการสร้าง Post สร้าง Page สร้างเนื้อหาขึ้นมา เช็คดูว่า tag แต่ละตัวเป็นยังไง แสดงผลออกมาแบบที่เราต้องการหรือเปล่า แต่ถ้าเราจะมาไล่สร้าง ไล่เนื้อหาทั้งหมด ก็คงจะเหนื่อยไม่น้อย ดังนั้นตัว WordPress เองจึงมีเนื้อหาตัวอย่างให้เรา Download ไปเพื่อใช้งานในการทดสอบ WordPress Theme ที่เราจะใช้งาน หรือสร้างขึ้นมา

ดาวน์โหลดเนื้อหาตัวอย่าง

ให้ดาวน์โหลดไฟล์ XML ตัวนี้มานะครับ https://wpcom-themes.svn.automattic.com/demo/test-data.2011-01-17.xml

Import เนื้อหาตัวอย่าง

หลังจากที่เราดาวน์โหลดมาเสร็จเรียบร้อยแล้ว ก็ให้ไปที่หลังบ้าน WordPress ของเรา มองหา Tools ไปที่ Import

เลือกที่ Tools > Import

ถ้าปรากฎหน้าแบบนี้ ให้เลือกที่ WordPress

เลือกหัวข้อ WordPress

หลังจากนั้น ติดตั้งตัว Importer

กด Install Now เพื่อติดตั้งเลยครับ

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

Import ไฟล์ XML ที่เราดาวน์โหลดมา

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

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

หลังจากที่ Import ข้อมูลเสร็จแล้ว เราก็จะได้เนื้อหาตัวอย่าง สำหรับที่จะเช็คตัว WordPress Theme ของเราแล้ว ตัวอย่าง Post ที่เรา Import เข้ามา อย่าง Post นี้ไว้เช็ครูปแบบตัวอักษร ตารางต่าง ๆ

Post ตัวอย่างในการเช็ค WordPress Theme

December 4, 2011
Child Theme มันเอาไว้ทำอะไรเหรอ

ในการทำ Theme WordPress นั่น คิดว่าต้องเจอกับคำว่า Child Theme บ้างละ แล้ว Child Theme มันคืออะไรละ แล้วมีไว้ทำอะไร เรามาทำความเข้าใจกับ Child Theme กันนะครับ

Child Theme คืออะไร

Child Theme คือ Theme ที่ยึดหลักโครงสร้างมาจาก Theme อื่น ซึ่งเรียกว่า Parent Theme โดย Child Theme จะแก้ไขหรือเพิ่มเติมฟังก์ชั่นจาก Parent Theme การสร้าง Child Theme ก็ไม่ยาก ลองมาดูกันครับ ว่าเราจะสร้าง Child Theme ได้ยังไง

สร้าง Child Theme ต้องทำยังไง

สร้าง Folder ที่จะเป็น Child Theme ของเราไว้ใน Path wp-content >> themes จะตั้งชื่อ Folder ว่าอะไรก็ได้ตามใจเรา สิ่งที่จำเป็นใน Child Theme นั้นคือ style.css ถ้าอ่านมาจากหัวข้อที่แล้ว เราก็จะทราบว่า style.css เนี่ยทำหน้าที่บอกว่า Parent Theme หรือ Theme ที่เราจะใช้ยึดหลักเพื่อเป็นโครงสร้างให้ Child Theme

style.css สำหรับ Child Theme

โดยส่วนใหญ่เราก็จะดึง CSS จากตัว Parent Theme มาเพื่อใช้งานด้วย สมมติเราจะใช้ Twenty Eleven Theme ตัว style.css เราจะเขียนประมาณนี้

[css]
/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author: My Name
Template: twentyeleven
*/

@import url("../twentyeleven/style.css"); /* นำ style.css จากตัว Theme หลักมาใช้งานด้วย */

/* Stylesheet เพิ่มเติมจากตัว style.css จากตัว Twenty Eleven Theme */
#site-title a {
color: #009900;
}
[/css]

ข้อสำคัญของ style.css คือ Theme Name กับ Template โดย Theme Name นั้นคือชื่อของ Child Theme และ Template คือชื่อ Folder ของ Theme ที่เราจะใช้เป็นหลัก หรือ Parent Theme

นอกจาก style.css ใน Child Theme เราทำอะไรได้บ้าง

ใน Folder ของ Child Theme นั้น นอกจาก style.css แล้ว ถ้าเราอยากจะแก้ หรือเพิ่มอะไร ก็สามารถเพิ่มใน Folder ของ Child Theme ได้เลย เช่นพวก functions.php page.php หรือ index.php อะไรแบบนั้น

พื้นฐานของ Child Theme คือ สร้าง Theme อันใหม่ที่ยึดหลัก Theme อันใดอันหนึ่ง โดยที่ไม่ได้ไปแก้อะไรใน Theme หลักเลย

November 29, 2011
Style.css กับหน้าที่ที่มากกว่าแค่ตกแต่งหน้าเว็บ WordPress

ตามปรกติที่เราทำเว็บนั้น ตัว CSS นั้นเราสามารถที่จะตั้งชื่อเป็นอะไรก็ได้ จะเป็น abc.css หรือจะเป็น snsd.css ก็ได้ แต่ใน WordPress นั้น ในกรณีที่เราใช้

[php]
<?php bloginfo(‘stylesheet_url’); ?>
[/php]

WordPress จะเรียก CSS ที่มีชื่อว่า style.css เป็นมาตรฐาน ซึ่งตัว style.css ใน WordPress ไม่ได้เป็นเพียงแค่ Stylesheet แต่สิ่งที่ style.css ทำหน้าที่ควบคู่ไปด้วย คือการบอกรายละเอียดต่าง ๆ ของ Theme

บอกรายละเอียดของ Theme ใน Style.css

ตัวอย่างที่จะยกให้ดู เราก็ไม่ได้ต้องไปดูไกลเลยครับ ก็ตัว Theme มาตรฐานที่ตัว WordPress ให้มานั้นละครับ

Theme Twenty Eleven 1.2

เราจะเห็นรายละเอียดต่าง ๆ ของ Theme Twenty Eleven 1.2 ได้ที่หลังบ้านในส่วนของ Appearance >> Themes ซึ่งรายละเอียดของ Theme นั้นอยู่ใน style.css นี่ละ ซึ่งจะเป็น comment อยู่ด้านบนสุดของตัว style.css ในลักษณะแบบนี้ครับ

[css]
/*
Theme Name: Twenty Eleven
Theme URI: https://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: https://wordpress.org/
Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background — then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.
Version: 1.2
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
*/
[/css]

ซึ่งนอกนั้นใน Child Theme ก็ใช้ comment ในส่้วนนี้เพื่อเชื่อมต่อกับ Theme หลักด้วย ในลักษณะแบบนี้

[css]
/*
Theme Name: Twenty Eleven Child
Theme URI: http: //example.com/
Description: Child theme for the Twenty Eleven theme
Author: Your name here
Author URI: http: //example.com/about/
Template: twentyeleven
Version: 0.1.0
*/
[/css]

จุดสำคัญจริง ๆ สำหรับ comment ส่วนนี้ของ Child Theme นั้นจะมีเพียงแค่้

[css]
/*
Theme Name: Twenty Ten Child
Template: twentyeleven
*/
[/css]

โดยในหัวข้อ Template จะเป็นตัวเชื่อมต่อกับ Theme หลักของเรา ซึ่งในส่วนของ Child Theme นั้นจะเขียนถึงในคราวหลังนะครับ

และนี่ละครับ style.css กับหน้าที่ที่มากกว่าแค่ตกแต่งหน้าเว็บ WordPress

November 27, 2011
[Plugin WordPress] : ใช้จัดการ File เพื่อให้ Download

วันนี้มี Plugin สำหรับคนที่อยากจัดการ File เพื่อให้คนเข้าเว็บ Download File ที่เราเตรียมไว้ Plugin ตัวนี้มีชื่อว่า WP-Filebase Download Manager

Plugin WordPress : WP-Filebase Download Manager

หลังจากที่เราลงตัว Plugin แล้วที่เมนูด้านซ้าย จะมีเมนูเพิ่มขึ้นที่ด้านล่างแบบนี้

เมนูของ WP-Filebase

ซึ่งตัว WP-Filebase จะมีส่วนที่ให้เราอัพโหลด File เพื่อนำไปใช้แบบนี้

หน้าสำหรับอัพโหลด File ไปใช้งาน

ผมลองอัพโหลด File ให้ดูเป็นตัวอย่างว่าจะไปปรากฎที่ด้านหน้ายังไงนะครับ

ผมอัพโหลด File ชื่อ Sublime.Zen.Coding.1.1.3.zip นะครับ

กรอกข้อมูลต่าง ๆ ในส่วนของ Post ID คือ เลือกว่าจะให้ File ตัวนี้ไปปรากฎที่ Post ไหน

ผลลัพธ์ที่ได้จากการอัพโหลดด้วย WP-Filebase

ซึ่งรูปแบบของมัน เราสามารถตกแต่งเพิ่มเติมได้ และมีรูปแบบให้เลือกอยู่หลากหลายทีเดียว ถ้าสนใจลองไปดูที่

Plugin WordPress : WP-Filebase Download Manager

November 24, 2011
CSS : แต่งกล่อง Facebook Like Box กัน

เพิ่งไปเจอมา เลยเอามาเขียนไว้เผื่อใครยังไม่รู้ จริง ๆ แล้วเราสามารถกำหนด Stylesheet ให้กับตัว Facebook Like Box ได้นะครับ

[html]
<div class="sidefb">
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="ใส่ id จาก facebook" stream="0" connections="8" logobar="0" width="ใส่ความกว้าง" height="ใส่ความสูง" css="ใส่ css ลงไป?1" rel="stylesheet" type="text/css"></fb:fan>
</div><!– .sidefb –>
[/html]

ตรง css= อย่าลืมใส่ ?1 และเปลี่ยนเป็น 2, 3, 4, … ทุกครั้งที่ทำการเปลี่ยนค่า css ในส่วนที่เราจะแต่ง Facebook Like Box ด้วยนะครับ อย่างเช่น ทำครั้งแรกก็ใส่เป็น css="stylesheet.css?1"

ผมก็เอามาประยุกต์ใช้กับ sidebar ด้านขวาของผมเหมือนกัน ใน Code ของ Theme WordPress ผมใส่แบบนี้ครับ

[php]
<div class="sidefb">
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="235867876471637" stream="0" connections="8" logobar="0" width="237" height="225" css="<?php bloginfo(‘stylesheet_url’); ?>?1" rel="stylesheet" type="text/css"></fb:fan>
</div>
<div class="sidetw">
<a href="https://twitter.com/Rabbitinblack" class="twitter-follow-button">Follow @Rabbitinblack</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="sideg">
<div class="g-plusone" data-size="medium" data-href="https://rabbitinblack.com"></div><span>Recommend on Google</span>
</div>
[/php]

ส่วน CSS ของผมก็เป็นแบบนี้ครับ

[css]
.fan_box .full_widget {padding:10px 3px 20px 3px !important;border:0 none !important;position:relative;}
.fan_box .connect_top{background: none !important;padding: 0 !important;}
.fan_box .profileimage, .fan_box .name_block{display: none;}
.fan_box .connect_action{ padding: 0 !important; }
.fan_box .connections{ padding: 0 !important;border: 0 !important;font-family: Roboto, Helvetica, sans-serif;font-size: 11px;font-weight: bold;color: #666; }
.fan_box span.total{ color: #FF4F92;font-weight: bold; }
.fan_box .connections .connections_grid {margin-right:-10px;padding-top: 10px !important; }
.fan_box .connections_grid .grid_item{ padding: 0 10px 10px 0 !important; }
.fan_box .connections_grid .grid_item .name{ font-family: "lucida grande",tahoma,verdana,arial,sans-serif;font-weight: normal;color: #666 !important;padding-top: 1px !important;}
.fan_box .connect_widget{ position: absolute;bottom:0px;left:0px;margin: 0 !important; }
.fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; }
.fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; }

.sidefb {position:relative;font-size: .85em;color: black;padding:0 9px;line-height: 1px;border:1px solid #DDD;}
.sidetw {background-color: #EEF9FD;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sideg {background-color: #EEF9FD; font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sideg span {margin-left: 2px;display: inline-block;vertical-align: text-top;color: #333}
[/css]

ผลลัพธ์ที่ได้ มีลักษณะแบบนี้ครับ

ลองปรับกันดูนะครับ

ลองเอาไปปรับแต่งกันดูนะครับทุกคน >_<
ที่มา : Create a “Mashable-Inspired” Sidebar Social Widget for WordPress

November 22, 2011