ปรับความสูงของ site-header หรือระยะห่างต่าง ๆ ใน wordpress

style css
style css

แฟ้ม style.css ของ Theme: Twenty sixteen
ใน wordpress มีกำหนดไว้เยอะมาก
ตัวหนึ่งที่ใช้กำหนดความสูงของ header คือ site-header

inspector chrome
inspector chrome

การกำหนดให้ padding: เป็น 0em และ 0%
ทำให้ส่วนของ header มีขนาดเล็กลง
ไม่ต้องมีขอบกินพื้นที่ของเนื้อหา

inspector firefox
inspector firefox

การตามแก้ไข css ใช้ inspector ของ browser
ทั้ง firefox และ chrome ช่วย developer ได้มาก
หาตำแหน่งได้ง่ายขึ้นมาก โดยกด ctrl-shift-i
จากนั้นคลิ๊ก inspector
เมื่อทราบว่าตำแหน่งใดที่กำหนด css ผ่านตัวใด ก็เข้าแก้ไขได้
เช่น

ลดขนาด margin-top หรือ padding เป็น 0em เป็นต้น
ลดขนาด margin top กับ left ของ site เหลือ 2px
ลดขนาด padding ของ site-content
จาก padding: 0 4.5455%; เป็น padding: 0 1%;
เพิ่มขนาด width: 71.42857144%; เป็น 80%
ของ body.no-sidebar:not(.search-results) article:not(.type-page) .entry-content
ลดขนาด width: 21.42857143%; เป็น 10%
ของ body:not(.search-results) article:not(.type-page) .entry-footer

ปรับแฟ้ม header.php ของ Theme: Twenty sixteen ใน wordpress

 

wp banner in header
wp banner in header

20 พ.ย.59 วันนี้เห็นว่าภาพ Banner ใน Header ของ Blog
ได้สุ่มภาพขึ้นมาแสดง ผ่านคุณสมบัติของ Theme
พบว่า คลิ๊กแล้วอยู่ที่หน้าเดิม คือ http://www.thaiall.com/blog
จึงคิดว่าน่าจะคลิ๊กแล้ว พาออกไปข้างนอก Blog ปัจจุบัน
นั่งคิดแป๊ปนึง ก็คิดได้ว่าที่ http://www.thaiall.com/km
มีเนื้อหาเกี่ยวกับ “การจัดการความรู้”
แล้ว Blog เองก็เป็นเครื่องมือหนึ่งสำหรับการจัดการความรู้ที่ดีมาก

ขั้นตอนการแก้ไขแฟ้ม header.php
1. เปิดแฟ้ม header.php
2. มองหาบรรทัดที่ 276 แบบด้านล่างนี้
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”>
เปลี่ยนเป็น
<a href=”http://www.thaiall.com/km” rel=”home”>
3. ทดสอบ view ดูหน้า blog ว่าคลิ๊กแล้ว
ไปหน้า KM (Knowledge Management) หรือไม่

อีกเหตุผลหนึ่ง ที่ลิงค์จาก Banner ใน Blog
ไปยัง KM Page คือ ยอด Pageview ของหน้า KM
ติด TOP ในเว็บเพจทั้งหมดของเว็บไซต์ thaiall.com
ใจจริงแล้วอยากลิงค์ไปยัง http://www.thaiall.com/handbill
เพราะมีเนื้อหาของ Handbill เรื่องภาพยนตร์ ที่สอดคล้องกับ Banner
อาจต้องใช้เวลาปรับเว็บไปอีกระยะหนึ่ง เพื่อปลุก Handbill ขึ้นมา
ถึงจะพาจาก Movie Banner ใน Blog ไปยังหน้า Handbill ได้

การปรับสีขาวดำของ wordpress

kelly theme in black and white
kelly theme in black and white

เพื่อนท่านหนึ่งติดต่อมา
ต้องการให้เว็บไซต์ให้เป็นสีขาวดำ ก็อยากแบ่งปันว่า
ปกติมักจะปรับกับ CSS(Cascading Style Sheet) เพราะง่ายที่สุด
สำหรับการปรับสีให้กับ Blog ของเรา ผ่านคุณสมบัติ filter
พบว่าการปรับในแต่ละ Theme ของ wordpress ไม่เหมือนกัน
ปกติ Theme ส่วนใหญ่จะมี Appearance และมี Editor
เข้าไปจะพบว่าแก้ไข Style.css

https://gist.github.com/thaiall/d4fea62b72d8ab026896d6142c0b4b6d

สำหรับ Theme ชื่อ Kelly ผมเพิ่มเข้าไปก่อนดังภาพ
แล้วไปแก้ไขภาพพื้น กับสี background ผ่านระบบ
เพราะการปรับ CSS ไม่มีผลต่อส่วนนั้น

เปลี่ยนให้ wordpress เป็นโฮมเพจขาวดำ ต้องใช้วันที่ 14 ตุลาคม พ.ศ.2559

wordpress black and white
wordpress black and white

พบ CSS code สำหรับเปลี่ยน webpage เพื่อไว้ทุกข์
จึงเข้า wordpress ในฐานะ admin แล้วเข้าไปแก้ไข css
ซึ่งใน Appearance มี Edit CSS จากนั้นก็เพิ่ม code ดังในภาพ
Blog ของเราที่ใช้ wordpress ก็จะเป็นสีขาวดำ
สำหรับสีที่อาจไม่เปลี่ยน จะมี option ให้แก้ไขเป็นการเฉพาะ
ให้เข้าไปเปลี่ยนตัวเลือก color หรือ background
ซึ่งตำแหน่งจะต่างกันไปตาม theme ที่เลือกไว้

* {
-moz-filter:grayscale(100%);
-webkit-filter:grayscale(100%);
filter:gray;
filter:grayscale(100%);
}

วิธีแก้ไขผ่าน Edit CSS ไม่ได้ผลกับ Firefox รุ่นใหม่ ที่ผมพึ่ง update ไป
แต่มีผลกับ chrome
หากจะให้มีผลกับ Firefox หรือ IE ด้วย ต้องเข้าไปแก้ไขใน style.css

เว็บไซต์ที่เล่าเรื่องการเปลี่ยนขาวดำ
http://nutn0n.com/blackandwhite/
http://www.krui3.com/manual/9300
http://www.mydigitalpartner.co.th/website-grayscale/
http://devbuntestproduct.sogoodweb.com/Article/Detail/54270
http://www.healthclub.in.th/howto-change-color-wordpress/

เว็บไซต์ล่มเพราะ upgrade jetpack

fatal error
fatal error

2 ต.ค.59 เว็บไซต์ lampang.net หายไปเกือบทั้งวัน เพราะช่วงเช้าได้ upgrade wordpress และ plugin jetpack กับหลายไซต์ แต่พบปัญหาที่ lampang.net โดย error ครั้งแรกแจ้งว่า service unavailable แล้วก็เงียบไปเลย ก็เป็นที่ server สิ่งที่ทำได้คือรอให้ server มีการ recover folder ต่าง ๆ กลับมาให้ครบ แต่หลังจากกลับมาทำงานปกติ พบว่าห้อง jetpack กลับไม่เหมือนเดิม

jetpack stat monthly
jetpack stat monthly

วิธีแก้ไข
1. ลบแฟ้ม jetpack.php พบว่าระบบมาทำงานปกติ แต่ jetpack หายไป
2. ลงใหม่ทับไม่ได้ ระบบไม่ยอม ฟ้องว่ามีของเก่าอยู่
3. ไปลบห้อง jetpack ในเครื่องออก แล้วสั่งลงใหม่
4. หลังลงใหม่ ต้อง activate อีกหลายขั้นตอน
– หน้า Dashboard ต้องกดปุ่ม Connect Jetpack
– แล้ว Log in เข้าระบบด้วย wordpress account
– แล้ว approve
– แล้ว Select Free
– แล้ว Activate Recommended Features
– เรียบร้อย

Plugin : Jetpack ของ wordpress คือ บริการเพิ่มการเข้าใช้งาน
ดูสถิติ เพิ่มความเร็วให้เว็บไซต์ และป้องกันการถูกจู่โจมจากผู้ไม่หวังดี
(Jetpack will be increase your traffic, view your stats, speed up your site, and protect yourself from hackers with Jetpack)
https://th.wordpress.org/plugins/jetpack/

Topics for upgrade member
– Traffic Growth & Insights
– Security
– Image Performance
– Centralized Management
– A few more things that our users love
– Dedicated Support
– Contributing to Jetpack

การแก้ไขเครื่องบริการเมื่อพบ DoS ผ่าน xmlrpc.php

netstat check connection
netstat check connection

วันนี้ (5 เม.ย.59) เครื่องบริการหนึ่งที่บริการผ่าน host name 3 ตัว
ปฏิเสธการให้บริการเป็นระยะ บางทีก็ตอบ บางทีก็ไม่ตอบ
พอใช้ remote desktop เข้าไปก็ได้ response time ที่ปกติ
จะ ping ก็ปกติ ปัญหามีเฉพาะ web server ผ่าน port 80
ก็ต้องแก้ไขกันไปตามอาการครับ
1. เข้าดู Access.log เข้าดูด้วย notepad ก็ไม่ได้
จะเข้าดูด้วย editplus ก็แฟ้มใหญ่เกินไป เพราะไม่เคย clear
ขนาดเกือบ 2GB จึงต้องลบทิ้งไปก่อน
แต่พบปัญหาว่า
จะลบก็ไม่ได้ เพราะ service start อยู่
จะ stop service ก็ไม่ได้ เครื่องค้าง
สรุปว่าต้อง restart
หลัง restart เข้า stop service ทันที แล้วลบ log
2. ใช้ DOS>netstat -na | more
พบว่าเครื่องโดนโจมตี Denied of Service Attack เข้าแล้ว
เพราะเห็นเครื่องบริการอยู่ 2 IP หลายร้อยการเชื่อมต่อ
3. เข้าดู access.log พบว่าแฟ้มที่โดนคือ xmlrpc.php
4. พบคำอธิบายการแก้ปัญหาที่
+ http://www.thaiseoboard.com/index.php?topic=354223.25;imode
+ https://httpd.apache.org/docs/current/howto/htaccess.html
+ http://www.mikevanwinkle.com/block-a-hacker-post-attack-on-wordpress-xmlrpc-php/
+ http://stackoverflow.com/questions/24472349/htaccess-doesnt-work-on-xampp-windows-7
5. เลือกแก้ปัญหาด้วยการใช้ .htaccess
การทำให้ .htaccess ทำงานได้ ทำโดยแก้ไขแฟ้ม httpd.conf

old #AllowOverride All
new AllowOverride All
old #LoadModule rewrite_module modules/mod_rewrite.so
new LoadModule rewrite_module modules/mod_rewrite.so

6. ทดสอบสั่ง block เครื่องบริการด้วย user authentication

AuthType Basic
AuthName “Password Protected Area”
AuthUserFile /.htpasswd
Require valid-user
ถ้าเปิดเว็บแล้ว ร้องถามรหัสผ่าน แสดงว่า .htaccess ทำงานได้ปกติ

7. การ block แฟ้ม xmlrpc.php ผ่านการกำหนดใน .htaccess ทำได้หลายวิธี
วิธีแรก
<Files “xmlrpc.php”>
Order Allow,Deny
Deny from all
</Files>
วิธีที่สอง
Order Deny,Allow
Allow from 122.154.225.
Deny from 89.248.167.
Deny from 185.103.252.
วิธีที่สาม
if ( strpos($_SERVER[‘HTTP_USER_AGENT’], “Googlebot”) === true ) { exit(); }

8. จาก 3 วิธีข้างต้น ผมเลือกวิธีแรก
เพราะไม่ต้องกังวลว่า ผู้ร้ายจะใช้เครื่องเบอร์อื่นโจมตีเข้ามาอีก
ปิดให้หมด ไม่ต้องบริการไปเลย

9. เข้าดู access.log ก็จะพบข้อความใน 3 ลักษณะ
คือ error แบบ 403 นี่แสดงว่ามีการควบคุม หรือเครื่องบริการเอาอยู่
ถ้าบริการปกติเป็น 200 หากไม่มีการ block แล้วปล่อยให้บริการปกติ เราจะพบ 200
ถ้าถูกโจมตีเครื่องจะหยุดบริการตามปกติจะพบ 200 สลับ 500 แบบนี้ไม่ดีแน่
อ่านความหมายของ 200, 403 และ 500 ข้างล่างนี้ได้

403 – Forbidden or Connection refused by host (เครื่องบริการปฏิเสธผู้ร้องขอข้อมูล อาจสงสัยผู้ร้องขอเป็นผู้ร้าย)
185.103.252.14 – – [05/Apr/2016:20:33:22 +0700] “POST /xmlrpc.php HTTP/1.1” 403 1044 “-” “Googlebot/2.1 (+http://www.google.com/bot.html)”
89.248.167.131 – – [05/Apr/2016:20:33:23 +0700] “POST /xmlrpc.php HTTP/1.1” 403 1044 “-” “Googlebot/2.1 (+http://www.google.com/bot.html)”

200 OK (ทุกอย่างปกติ)
89.248.167.131 – – [05/Apr/2016:20:36:33 +0700] “POST /xmlrpc.php HTTP/1.1” 200 370 “-” “Googlebot/2.1 (+http://www.google.com/bot.html)”
185.103.252.14 – – [05/Apr/2016:20:36:33 +0700] “POST /xmlrpc.php HTTP/1.1” 200 370 “-” “Googlebot/2.1 (+http://www.google.com/bot.html)”

500 Server Error (เครื่องบริการมีข้อผิดพลาด)
185.103.252.14 – – [05/Apr/2016:20:36:33 +0700] “POST /xmlrpc.php HTTP/1.1” 500 – “-” “Googlebot/2.1 (+http://www.google.com/bot.html)”
89.248.167.131 – – [05/Apr/2016:20:36:33 +0700] “POST /xmlrpc.php HTTP/1.1” 500 – “-” “Googlebot/2.1 (+http://www.google.com/bot.html)”

trackbacks
trackbacks

10. เมื่อกำหนด .htaccess เพื่อปฏิเสธการให้บริการกับเครื่องที่ไม่ประสงค์ดีแล้ว
ก็จะพบรายงานใน access.log มาเรื่อย ๆ ว่าปฏิเสธ แล้วแสดง 403
ซึ่งไม่เป็นปัญหาแต่อย่างใด ยกเว้น access.log จะใหญ่ไปหน่อย
ดังนั้นว่าง ๆ ก็เข้าไปดูแล และ clear ตามรอบเวลาที่ตั้งไว้

11. xmlrpc.php เป็นความสามารถหนึ่งของ wordpress
แต่ผู้ไม่ประสงค์ดีเลือกใช้บริการตัวนี้ ก่อความเสียหายให้กับเครื่องบริการ
โดย xmlrpc.php ใช้กับงาน pingback หรือ trackback
เลือกชี้ไปยังเครื่องเป้าหมาย แล้วทำให้เครื่องเป้าหมายล้มไปเลย
ครั้งนี้เครื่องของผมเป็นเป้าหมาย ถูกยิงมาจากทั่วสารทิศ

pingback
pingback

12. วิธีแก้ง่าย ๆ คือ ลบ xmlrpc.php ทิ้งไปเลย
แค่นี้ก็หมดปัญหา แต่จะรู้สึกเสียดายกับความสามารถเรื่อง pingback กับ trackback เท่านั้นเอง
[pingback] เกิดเมื่อเขียน post ใน Blog A แล้วอ้างถึง post ใน Blog B
เท่ากับว่ามีการ Comment สำหรับ post ใน Blog B
แล้วมีข้อความแจ้งกับไปยัง Blog B ว่าท่านถูก Comment จาก Blog A นะ
เมื่อผู้ดูแล Blog A รับทราบก็จะกดอนุมัติให้มีการ Pingback
http://www.wpbeginner.com/beginners-guide/what-why-and-how-tos-of-trackbacks-and-pingbacks-in-wordpress/

13. ปัญหานี้ ถ้าติดตั้ง Plugin อาจช่วยได้อีกแรง
เช่น Akismet
http://www.wpbeginner.com/beginners-guide/akismet-101-guide-for-all-wordpress-users/
Akismet is a comment spam filtering service. The name Akismet comes from Automattic and Kismet. Auttomatic is the company behind Akismet, and it was founded by the WordPress co-founder Matt Mullenweg. Akismet catches blog comment and pingback spam using their algorithms

ส่งภาพเข้าผิดห้อง หลังย้าย directory ของ blog

wordpress media folder
wordpress media folder

ในระบบ blog ของเครื่องบริการเครื่องหนึ่งที่ผมร่วมดูแล
พบว่า หลายคืนมาแล้วที่ส่งภาพ image เข้า blog แล้วหาย
ไม่ฟ้อง error เหมือนใคร ๆ เขา
เหมือนส่งเข้าได้ปกติ แต่กลับไม่แสดงผล
ก็คิดว่าเป็นปัญหาที่ระบบ directory
วันนี้นั่งหาวิธีแก้ไขว่าอะไรคือสาเหตุ

สุดท้ายก็พบว่า wordpress ที่เริ่ม post แรก
ตั้งแต่ 8 เมษายน 2009 นั้น มีการย้ายระบบมาหลายรอบ
อัพเกรดก็หลายครั้ง ล่าสุดเดือนกุมภาพันธ์ 2557
มีการย้ายจาก appserv เป็น xampp
แต่มีค่า config ใน mysql ได้บันทึกชื่อ directory ไว้
สำหรับห้องเก็บ media เมื่อย้าย directory ของ script
แต่ไม่ไปแก่ config ก็ทำให้ระบบสับสนว่าจะเลือกห้องเก็บภาพที่ไหน
ตอนส่งภาพเข้าไป ก็ส่งเข้าห้องเก่า แต่ตอนเรียกใช้ กลับเรียกจากห้องใหม่
จากความพยายามหาว่าอะไรคือสาเหตุ ก็ได้มีการ upgrade version
เป็น 3.9.1 เป็นที่เรียบร้อย ดูทันสมัยขึ้นพอสมควร

oocities.org เป็นกระจกของ geocities.com

kindlyrat in oocities.org
kindlyrat in oocities.org

9 มิ.ย.56 อินเทอร์เน็ตและการพัฒนาเว็บไซต์ในยุคแรก ไม่มีนักพัฒนาคนใดไม่รู้จัก geocities.com เพราะเป็นผู้ให้บริการพื้นที่โฮมเพจฟรีอันดับหนึ่ง ในยุคที่ server-sided script ยังไม่แพร่หลาย ถูกก่อตั้งปี 1994 แล้วปี 1999 ก็ถูกซื้อโดย yahoo.com และปิดบริการ 27 ตุลาคม 2009 สืบเนื่องจากก็มีเว็บไซต์มากมายเปิดให้บริการหลากหลายรูปแบบ และสมบูรณ์ทั้งบน windows และ linux แล้วการทำธุรกิจด้านนี้ก็ไม่เป็นไปตามที่คาดหมายไว้ ทำให้ทะยอยปิดกันไปเกือบหมด
เนื้อหามากมายใน geocities.com มีคุณค่า และมีผู้เห็นคุณค่า จึงเปิด domain ใหม่ ชื่อ oocities.com และนำข้อมูลไปเก็บ แล้วเผยแพร่ในรูปของ mirror site ซึ่งตัวแปลภาษา gw-basic ก็ได้เนื้อหา และตัวแปลภาษามาจากเว็บไซต์นี้ ในบัญชีของ kindlyrat

geocities compare with wordpress
geocities compare with wordpress

http://www.thaiall.com/gwbasic/

ม.ร.ว.พุฒิภัทร จุฑาเทพ กับนางสาวศรีสยาม
ม.ร.ว.พุฒิภัทร จุฑาเทพ กับนางสาวศรีสยาม

ถ้าไม่มีนางสาวศรีสยาม ป่านนี้
ม.ล.มารตี ก็คงแต่งงานกับ  ม.ร.ว.พุฒิภัทร จุฑาเทพ ไปแล้ว
เป็นความเชื่อของ ม.ล.มารตีที่สะท้อนออกมาตอนจบ
http://drama.kapook.com/view50186.html

sharethis.com within wordpress script

sharethis within blog
sharethis within blog

การใช้บริการ share button ของ sharethis.com ซึ่งใช้ login account ของ facebook.com เพื่อนำบริการไปฝังเข้า (embedded) blog ที่ใช้ wordpress script
ซึ่งได้ code ของ sharethis ที่ได้มา ได้จากการคลิ๊ก other ShareThis Widgets, Website, Sharing buttons, Finish get the code, Multi Post

ใน wordpress script
– แก้ไข header.php
– แก้ไข footer.php

statistic in sharethis.com
statistic in sharethis.com

http://support.sharethis.com/customer/portal/articles/517333-analytics-faqs

ปรับ header ของ wp Twenty Eleven 1.3

lampang.net
lampang.net

มีโอกาสใช้ theme ชื่อ Twenty Eleven 1.3 ของ wordpress.com ที่บริการบนเว็บไซต์ lampang.net พบว่ามี header ส่วนสีขาวบนสุด ค่อนข้างสูงเกินพอดี ผมปรับรายละเอียดดังนี้

1. แก้ header.php ลบ hgroup h1 และ h2 แต่ content ยังอยู่

2. ลบ searchform ออกจาก header.php
<?php
// Has the text been hidden?
if ( ‘blank’ == get_header_textcolor() ) :
?>
<div>
<?php get_search_form(); ?>
</div>
<?php
else :
?>
<?php get_search_form(); ?>
<?php endif; ?>