Filed under: Articles

Chào WordPress 3.5 và Twenty Twelve theme!

Sau nhiều chờ đợi thì WP3.5 Beta1 cũng đã ra mắt với người dùng với nhiều tính năng bổ sung quan trọng. Nào cùng dạo một vòng!

UI

UI tại backend đã có nhiều thay đổi từ v3.5 trực quan hơn.

New UI wordpress 3.5

LINK

Link manager sẽ được loại bỏ từ core và phát hành bằng plugin Link Manager

Link manager removed

END Users

  • Appearance: A simplified welcome screen. A new color picker. And the all-HiDPI (retina) dashboard.
  • Accessibility: Keyboard navigation and screen reader support have both been improved.
  • Plugins: You can browse and install plugins you’ve marked as favorites on WordPress.org, directly from your dashboard.
  • Mobile: It’ll be easier to link up your WordPress install with our mobile apps, as XML-RPC is now enabled by default.
  • Links: We’ve hidden the Link Manager for new installs.

Đọc thêm tại : http://wordpress.org/news/2012/09/wordpress-3-5-beta-1/

Twenty Twelve

Như đã nói ở bài trước, Twenty Twelve sẽ là theme mặc định cho WP 3.5 Đây là theme được thiết kế bởi TheThemeFoundry, responsive…
Demo: https://twentytwelvedemo.wordpress.com
Download: http://wordpress.org/extend/themes/twentytwelve

Filed under: Articles, Tutorials

Tinh chỉnh WordPress theme functions mặc định

WordPress cung cấp cho chúng ta nhiều cách linh hoạt để tinh chỉnh rất nhiều thứ ta muốn. Để làm điều đó chúng ta nghĩ ngay đến plugin libs hay tìm kiếm một theme phù hợp với yêu cầu khi ta không tự viết được theme. Nhưng có những tùy chỉnh nho nhỏ mà chỉ cần thay đổi đôi chút mà không cần đến plugin hay theme khác.

  • jQuery libs

    WP cung cấp mặc định jQuery libs khi ta gọi, để giảm tải cho server local chúng ta nên sử dụng CDN hosted được cung cấp bởi Google, Microsoft hoặc jQuery. Thêm vào functions.php tại theme ta đang sử dụng:

    function add_scripts() {<br /><br />
    wp_deregister_script( 'jquery' );<br /><br />
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js');<br /><br />
    wp_enqueue_script( 'jquery' );<br /><br />
    }<br /><br />
    add_action('wp_enqueue_scripts', 'add_scripts');

jQuery CDN hosted:

Google Ajax API CDN (Also supports SSL via HTTPS)

https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery Google Ajax CDN Documentation]

Microsoft CDN (Also supports SSL via HTTPS)

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js

jQuery CDN (via Media Temple)

http://code.jquery.com/jquery-1.8.1.min.js Minified version
http://code.jquery.com/jquery-1.8.1.js Development (Full) version
  • Tùy biến thumbnail

Như đã giới thiệu trước đây, WP2.9+ hỗ trợ chúng ta tùy chỉnh thumbnail bằng cách thêm vào functions.php:

add_theme_support( 'post-thumbnails' );<br /><br /><br /><br /><br />
add_image_size( 'thumb-A', 760, 300, true );

Ta có thể thêm bao nhiêu thumbnail size tùy thích và gọi chúng khi cần. Ví dụ để gọi thumb-A ta dùng trong loop:

if ( has_post_thumbnail() ){ 
    the_post_thumbnail( 'post-header' ); 
}

Để mặc định thumbnail nếu không set ta dùng:

if ( has_post_thumbnail() ){ 
    the_post_thumbnail( 'thumb-A' ); 
}else{
    <img src="'. IMAGES .'/default.jpg" alt="thumb A" />
}
  • Chải chuốt lại sidebar

Để thêm sidebar đơn giản ta thêm vào theme functions.php:

register_sidebar( array (
    'name' => __( 'Sidebar', 'sidebar1' ),
    'id' => 'primary-widget-area'
));

Nhưng ta có thể thêm một số thông số để thiết kế sao cho hợp mắt vào đẹp theo ý muốn:

register_sidebar( array (
    'name' => __( 'Sidebar', 'sidebar1' ),
    'id' => 'primary-widget-area',
    'description' => __( 'The primary widget area', 'wpbp' ),
    'before_widget' => '<div class="widget">',
    'after_widget' => "</div>",
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

Để gọi nó ta dùng:

<?php if ( is_active_sidebar( 'sidebar1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar1' ); ?>
<?php else : ?>
  • Thêm nội dung vào RSS Feed

Khi có một blog với số lượng người theo dõi bằng feed nhiều thì ta không thể bỏ qua cơ hội tận dụng feed để đặt banner hoặc thêm nội dung ta cần. Để làm được điều đó ta dùng:

function add_to_feed($content){
   $content .= "<p>Them noi dung vao Feed!</p>";
   return $content;
}

add_filter( "the_content_feed", "add_to_feed" );
  • Tô điểm comments của người viết bài

enter image description here

.comment { /* Comment của thành viên */
   background: #FFFFFF;
   color: #666666;
}

.bypostauthor { /* comment của người viết (Author)*/
   background: #dfdfdf;
   color: #292929;
}
  • Đánh dấu/Đặt chữ ký vào post

Không phải quá cần thiết, nhưng cũng là một tips hay cho ai thích mà không cần hard-code:

function sig_to_content($content){
   if(is_single()){
        $content .= '<p><img src="'. IMAGES .'/sig.png" alt="Joseph L. Casabona" /></p>';
        return $content;
   }
}
  • Search form

Bạn muốn thêm search form vào đâu đó trong website? Thật đơn giản:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

Nếu không thích input botton search ta có thể thay bằng placehoder hay value form:

<form class="searchform" method="get" action="<?php bloginfo( 'url' ); ?>">
    <input class="search" name="s" onclick="this.value=''" type="text" value="Enter your search" tabindex="1" />
</form>

Ngoài ra ta có thể make-up hàm bằng cách tùy biến trong functions.php :

https://gist.github.com/3695453

Mong được góp ý!

Filed under: Articles

Thêm breadcrumbs vào Theme không cần plugin

Breadcrumbs là phần mở rộng của website giúp người sử dụng điều hướng tốt hơn. Để thêm vào WP ta các plugin mà không cần viết function như Breadcrumb NavXT hay Yoast Breadcrumbs. Ở bài viết này tôi xin giới thiệu các tùy biến Breadcrumbs mà không cần sử dụng các plugin nêu trên.

Đầu tiên chúng ta cần tạo một file có tên gọi là breadcrumb.php trong theme đang sử dụng. Tiếp theo ta gọi nó thông qua functions.php.

  • Tạo breadcrumb.php
    https://gist.github.com/3667390

  • Gọi breadcrumbs bằng cách thêm vào functions.php

    require_once('library/breadcrumb.php');

  • Để hiển thị breadcrumbs bất cứ nơi nào ta muốn ta dùng hàm:
    <?php wp_breadcrumb(); ?>
    • Để make-up breadcrumb ta có thể tối ưu hóa thẻ current:
      .current { font-weight:bold; }

Chúc bạn thành công,

Filed under: Articles

12 thiết lập nhỏ cho wp-config.php

Trong thực tiễn khi vận hành một website/blog trên nền WP đôi khi chúng ta cần thiết lập một vài chi tiết nhỏ để mang lại tiện lợi và hiệu năng tối ưu nhất.

Xin giới thiệu 12 thiết lập nhỏ cho wp-config.php

Backup wp-config.php file phòng trường hợp xấu!

Hãy backup file config quan trọng phòng khi ta lỡ chỉnh sửa sai/thừa khiến cho WP không chạy. Bạn nên đưa thiết lập vào wp-config.php ngay bên dưới dòng define(‘DB_COLLATE’, ”);

Các tips tăng tốc độ WP

  • Tắt chức năng lưu bản ghi sửa đổi (Revisions)

Chức năng này nhằm cung cấp cho chúng ta những bản ghi lịch sử sửa đổi bài viết, chúng ta có thể đưa bài viết về những thời gian sửa đổi về nội dung hay bất cứ thứ gì liên quan. Chẳng hạn từ khi “Publish” bài viết ta đã sửa đổi 2 lần – nghĩa là trong bản ghi bài viết đó có lịch sử sửa đổi đến 3 lần. Và ta có thể đưa bài viết đó về nội dung ban đầu hoặc 2 lần sửa đồi. Nếu bạn không cần đến chức năng này bạn nên tắt nó đi bởi nó có ảnh hưởng tới database.

define('WP_POST_REVISIONS', false );

Bạn vẫn còn lựa trọn để giữ lại chức năng này nhưng giới hạn số bản ghi:

define('WP_POST_REVISIONS', 2 );
//Thay 2 bằng số bản ghi bạn muốn lưu
  • Thiết lập Cookie cho domain của bạn

Để thiết lập cookie cho domain của mình ta thêm vào config

define('COOKIE_DOMAIN', 'wordpress.com.vn');
//Thay wp.com.vn bằng domain của bạn
  • Thay đổi cơ chế Filesystem

Nếu bạn thường xuyên cập nhập, sửa xóa theme hay plugin rất có thể mỗi lần bạn sẽ buộc phải điền thông tin FTP. Khá khó chịu nếu mỗi ngày ta đều update plugin hay theme. Để giải quyết ta thêm vào config đoạn code sau đây:

define('FS_METHOD', 'direct');

Lưu ý rằng thiết lập này đôi khi không có tác dụng với một số nhà cung cấp hosting do vấn đề an ninh. Hãy cân nhắc trước khi sử dụng và đặc biệt không nên sử dụng trên shared-hosting.

Các tips bảo mật cho WP

  • Giới hạn quyền truy vấn đề wp-config.php

Bằng cách thiết lập cho .htaccess loại bỏ quyền truy vấn đến wp-config.php

<files wp-config.php>
    order allow,deny
    deny from all
</files>
  • Sử dụng SSL

Nếu webserver của bạn hỗ trợ giao thức SSL bạn nên sử dụng nó đối với các trang như đăng nhập hoặc wp-admin.

Để bật SSL cho trang đăng nhập ta thiết lập:

define('FORCE_SSL_LOGIN', true);

Để bật SSL cho wp-admin ta thiết lập:

define('FORCE_SSL_ADMIN', true);
// Tìm hiểu thêm tại codex: http://codex.wordpress.org/Administration_Over_SSL
  • Tùy chỉnh Database Prefix

Để giảm thiểu nguy cơ bị hack SQL injection ta nên dùng Database Prefix khác thay vì mặc định là wp_

$table_prefix  = 'wpvn_';
//Thay wpvn_ bằng prefix mà bạn muốn

Nếu website của bạn đã và đang vận hành bạn không thể thay đổi database prefix nếu chỉ thiết lập tại wp-config.php. Bạn cần một plugin giúp bạn đổi prefix trong database nữa: Plugin Change DB Prefix

  • Sử dụng Security Keys

Tại wp-config.php nếu chưa có Security Keys bạn nên thêm vào config. WordPress API có cung cấp một tool tạo các keys này một cách ngẫu nhiên: https://api.wordpress.org/secret-key/1.1/salt/

Tìm hiểu thêm tại codex: http://codex.wordpress.org/Editing_wp-config.php#Security_Keys

Một số típ khác

  • Thay đổi thời gian tự động lưu bài viết

Tùy từng bài viết mà số thời gian ta cần để viết lâu hay nhanh. WP mặc định sẽ tự động lưu và “Draft” sau một thời gian nhất định. Để thay đổi ta làm như sau:

define('AUTOSAVE_INTERVAL', 240 );
// 240 là giá trị thời gian tự động lưu tính bằng giây
  • Dễ dàng đổi tên miền hoặc thư mục cho WP

Đã có rất nhiều người gặp tình trạng không truy cập được mỗi khi thay đổi tên miền, thay đổi thư mục gốc của WP hoặc đơn giản là chuyển WP từ loaclhost lên livesite (ta gọi chung là di chuyển WP). Và mỗi lần như vậy ta đều phải chỉnh sửa trực tiếp URLs ngay trong database. Để tránh gặp tình trạng này ta có thể thiết lập như sau:

define('RELOCATE',true);  
// Thiết lập vào wp-config.php trước khi di chuyển WP.

Sau khi di chuyển WP (kể cả database) bạn truy cập vào backend theo đường link mới bằng cách đăng nhập để đổi URLs trực tiếp trong wp-admin:

  • Đăng nhập: tenmienmoi.vn/wp-login.php
  • Thay đổi URLs tại Options/General

Lưu ý: Xóa thiết lập này ngay khi hoàn tất việc thay đổi URLs.

  • Tắt chức năng chỉnh sửa trực tiếp theme và plugin trong backend

Có nhiều lý do khiến ta cần sử dụng thiết lập này, ví dụ website có nhiều admin nhưng bạn không muốn tất cả họ có thể chỉnh sửa các file trong theme hay plugin. Ta thêm thiết lập:

define('DISALLOW_FILE_EDIT',true);

Thêm vào đó bạn cũng có thể tắt chức năng cài đặt thêm theme hay plugin mới bằng thiết lập:

define('DISALLOW_FILE_MODS',true);

Có một khó khăn nho nhỏ đó là khi tắt các chức năng này bạn bắt buộc phải chỉnh sửa theme hay plugin trên máy và upload lên host mỗi khi hoàn thành. Cũng tương tự như mỗi khi plugin hay theme có bản cập nhập từ wp.org ta cũng đều phải upload lên host.

  • Bật debug mode

Khi website đang trong quá trình xây dựng thì thiết lập này khá quan trọng, nó giúp ta biết được lỗi phát sinh từ đâu:

define('WP_DEBUG',true);
  • Thiết lập MEMORY_LIMIT

Mặc định PHP cung cấp memory limit là 32M, và nếu ta không đủ quyền hạn để thiết lập phía server ta có thể thiết lập ngay trong wp-config.php bằng cách:

define(‘WP_MEMORY_LIMIT’, ’64M’);

Rất mong được góp ý!

Filed under: Tutorials

Thủ thuật nhỏ nhằm tiếp kiệm băng thông và giảm tải cho máy chủ

Băng thông (Bandwidth) – Dữ liệu truyền từ webserver đến người dùng là nguồn tài nguyên thường bị giới hạn bởi nhà cung cấp dịch vụ, là người quản trị hẳn chúng ta đều quan tâm đến việc làm thế nào để tiết kiệm băng thông và giảm tải cho webserver mà vẫn đảm bảo được sự ổn định của website. Bài viết này góp nhặt những thủ thuật nhỏ giúp chúng ta phần nào đó giải quyết được vấn đề này.

Sử dụng CSS thay vì ảnh

Hình ảnh là “static file” vì vậy chúng rất tiêu tốn băng thông và ảnh hưởng đến sức tải của máy chủ. Đa phần những trình duyệt mới nhất hiện nay đều hỗ trợ sử lý đồ họa bằng CSS như box shadow hay border … Thay vì dùng hỉnh ảnh ta sử dụng CSS3 là giải pháp rất hữu hiệu.

Một số máy tính vẫn sử dụng những trình duyệt đi kèm rất cũ như IE6 nếu cần ta nên hỗ trợ riêng để tránh ảnh hưởng không cần thiết đến những người sử dụng trình duyệt mới.

<!--[if IE 6]>
<link href="ie.css" rel="stylesheet" />
<![endif]-->

Tối ưu hóa hình ảnh hiển thị

Trong nội dung cung cấp không thể thiếu hình ảnh minh họa đa phương tiện, việc ta nên quan tâm là tối ưu hóa hay nén các bức ảnh khiến kích thước của chúng nhỏ lại mà vẫn giữ được chất lượng tương đối.

Nếu bạn sử dụng Adobe Photoshop bạn có thể tùy chọn “Save for web” để phần mềm tự động tối ưu một cách tốt nhất có thể. Ngoài ra chúng ta cũng có thể sử dụng các dịch vụ cung cấp khác như Yahoo Smush It.
Với WordPress bạn có thể dùng plugin WP Smush.it để tự động tối ưu hóa ảnh thông qua SmushIt mỗi khi ta upload.

Cache website để tối ưu hóa tốc độ và kích thước

Dùng .htaccess để lưu cache vào bộ nhớ đệm của trình duyệt các static file ta thường sử dụng như .js .css .jpg .png .gif … Việc này cũng được khuyến cáo từ Google (PageSpeed tool)

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING #

Nếu bạn sử dụng WordPress tôi xin giới thiệu plugin cache rất nhiệu quả: W3 Total Cache

Anti-Hotlinking

Đôi khi các website khác sử dụng tài nguyên là các static file của chúng ta khiến băng thông tiêu tốn không ít, vì vậy nên giới hạn việc đó bằng cách sử dụng .htaccess

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?domain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?domain2.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://yourserver.com/yourimage.gif [NC,R,L]
#Thay domain.com,domain2.com,yourserver.com bằng domain của bạn

Nén CSS và Javascripts

Các file CSS và Javascripts khi được nén kích thước của chúng thường giảm một cách đáng kể. Dùng Minify có thể giúp bạn làm việc này. Lưu ý nếu bạn sử dụng WordPress thì plugin WP Total cache đã có sẵn Minify.

Lưu trữ file tại ngoài website

Thay vì sử dụng trực tiếp host sử dụng tại website hãy sử dụng các dịch vụ thứ 3 khác như Dropbox để lưu trữ.

Sử dụng GZip

Vui lòng đọc hướng dẫn cụ thể tại đây!

Sử dụng CDN và Webhosting đáng tin cậy

Là webmaster chắc hẳn các bạn đã biết không phải dịch vụ của nhà cung cấp nào cũng đáng tin cậy và có quy tín. Đối với từng nhu cầu cụ thể ta lựa trọn dịch vụ cho phù hợp.
Xem thêm: http://wordpress.org/hosting/
CDN: http://techwalls.com/blogging/best-cdn-services-wordpress/

Sử dụng CloudFlare

Không phải ai cũng thích sử dụng một dịch vụ mới mẻ như CloudFlare nhưng tôi tin chắc rằng nó sẽ đem lại rất nhiều lợi ích cho bạn.
Xem thêm: https://www.cloudflare.com