Cập nhật đường dẫn khi chuyển domain cho WordPress

Khi chuyển WordPress từ domain này sang domain khác mà bạn muốn đổi tất cả url có trên site cũ sang domain site mới thì cần phải thực hiện thêm một số công đoạn sau:

Làm thủ công

Đối với cách làm thủ công bạn phải truy cập vào PHPMyadmin hoặc dùng terminal của mysql để update lại. Dưới đây là câu query để cập nhật lại url cho WordPress:

Cập nhật home_url và siteurl

 Cập nhật lại guid của WordPress

 Cập nhật trong nội dung bài viết

Nếu bạn là một người hay viết bài chuẩn SEO, sử dụng liên kết nội trong bài viết của mình thì khi chuyển qua tên miền mới những đường dẫn đó sẽ không cập nhật lại vì thể phải sử dụng theo tác cập nhật mysql bên dưới:

Một điều nữa nếu bạn muốn khi người dùng truy cập vào đường dẫn của tên miền cũ sẽ tự động chuyển sang tên miền mới với đường dẫn tương ứng ví dụ khi người dùng vào đường dẫn http://www.old-domain.com/thu-thuat-wordpress sẽ chuyển hướng sang http://www.new-domain.com/thu-thuat-wordpress để làm được điều này bạn cần thêm đoạn sau vào file .htaccess.

Mình đã giới thiệu đến các bạn cách đổi đường dẫn cho WordPress bằng cách thủ công chút xíu nhưng cũng mang lại hiệu quả. Nhưng một số bạn ngại dùng code nhiều hay không có kinh nghiệm sử dụng MySql thì mình cũng xin giới thiệu một plugin để giúp các bạn.

Thay đổi đường dẫn WordPress bằng Plugin

Để làm điều này bạn có thể sử dụng plugin Velvet Blues. Bạn cần tiến hành cài đặt plugin này.

Sau khi cài đặt xong bạn vào ToolsUpdate URLs. Tiến hành nhập tên miền mới và tên miền cũ.

cap nhat url khi doi ten mien wordpress

Sau khi nhập đầy đủ bạn có thể tùy chỉnh cập nhật với những vùng dữ liệu khác nhau. Sau đó nhấn Save để plugin cập nhật lại. Vậy là xong, quá đơn giản so với cách làm thủ công phải không nào.

 Kết luận

Với hai cách cập nhật đường dẫn cho website WordPress khi chuyển tên miền bạn có thể dễ dàng chỉnh sửa lại những link mình đã thêm một cách nhanh chóng mà không cần phải sửa từng bài viết.

10 Packages Sublime Text cần thiết cho Frontend Developers

Sublime Text là một IDE nhẹ và nhiều tính năng hay. Bạn có thể thêm những tính năng mới thông qua việc cài đặt Plugin hay Package. Những plugin được thêm vào sẽ mở rộng thêm tính năng cho Sublime Text.

10-packages-sublime-text-can-thiet-cho-frontend-developers

Có thể một số package sẽ không tương thích với bản Sublime Text 3. Những tính năng trong bài viết này sẽ giúp cho những frontend developer thao tác nhanh chóng hơn.

1. AlignTab

AlignTab là một package giúp bạn sắp xếp lại code một cách gọn gàng hơn. AlignTab có hổ trợ “Preview Mode” giúp bạn có thể xem trước khi nó thực hiện sắp xếp.

align-tab

2. ColorHighlighter

ColorHighlighter là package cho phép bạn nhìn thấy màu sắc của mã màu mà mình sử dụng trong CSS, LESS, SASS,… Bạn cũng có thể thay đổi màu bằng cách nhấn đề chuột vào mã màu cần đổi.

Description

Description

Description

3. MultiEditUtils

MultiEditUtils là package giúp cải thiện tính năng “đa con trỏ” của Sublime Text

multi-edit-utils

4. Git Gutter

Nếu bạn đang làm việc với Git, mình khuyên bạn nên cài Git Gutter. Package này giúp cảnh bảo những thay đổi phiên bản của bạn với Git server

git-gutter

5. Modific

Cũng giống như GitGutter, Modific rất hữu ích khi bạn đang sử dụng Git hoặc SVN trong công việc của bạn.Ngoài việc làm nổi bật, bạn có thể xem sự khác nhau giữa các phiên bản và commit bằng cách sử dụng tổ hợp phím Ctrl + Alt + D

modific

6. Inc Dec Value

Inc Dec Value cho phép bạn tăng giá trị của số đồng thời, dù nằm trên những dòng khác nhau. Đối với String thì sẽ chuyển từ viết hoa sang thường và ngược lại

inc-dec-value

7. FileBrowser

FileBrowser cung cấp khả năng duyệt file linh hoạt hơn so với mặc định. Bạn có thể duyệt thư mục mà không cần đưa con trỏ chuột sang sidebar.

file-browser

8. IconFont

IconFont cung cấp đoạn cho nhiều phông chữ biểu tượng phổ biến như FontAwesome ,PaymentFont , TypiconsGithub Octicons.

icon-fonts

9. DistractionFreeWindow

Tính năng Free Distraction của Sublime Text giúp bạn có thể tập trung code mà không bị phân tâm bởi minimap, sidebar, và tất cả các tab đang ẩn.DistractionFreeWindow giúp bạn định nghĩa các điều kiện để Distraction Free Mode hoạt động linh hoạt hơn.

distraction-free

10. FilterLines

FilterLines cho phép bạn tìm kiếm chuổi từ khóa hoặc chuổi RegEx. Tính năng này rất hữu ích với những ai phải duyệt dữ liệu thô ở dạng JSON, JavaScript Array, CVS

filter-lines

Trên đây là một số package cần thiết cho frontend developer nếu bạn biết thêm thì hãy để lại comment để mình bổ sung vào vài viết này.

Tối ưu hóa kích thước hình ảnh trên WordPress

Tối ưu hóa hình ảnh trên trang web là một nhiệm vụ khó khăn vì hình ảnh là phần nặng và chiếm nhiều tài nguyên của hosting nhất. Có nhiều cách giúp tối ưu như giảm số lượng hình ảnh sử dụng, nén hình ảnh, sprites hoặc svg. Nhưng có một điều mà nhiều site sử dụng WordPress gặp phải là không xác định chính xác kích thước hình ảnh cần sử dụng.

Một điều mà dân SEO hay nhắc đến khi muốn SEO thành công một website là phải có nội dung và dung lượng nhẹ. Nhưng nếu bài viết mà chỉ toàn chữ thì nhìn rất chán. Bạn có một bức ảnh 3000px và bạn sẽ không muốn người dùng phải load file ảnh đó chỉ để xem trong nội dung bài viết của bạn với chiều rộng 600px.

WordPress xử lý hình ảnh như thế nào?

Khi bạn thêm một hình ảnh vào bài viết thì mặc định wordpress sẽ tạo ra 3 ảnh với kích thước do bạn định tại Setting >> Media với 3 kích thước chuẩn là thumbnail, medium, large. Khi bạn muốn sử dụng hình ảnh với kích thước medium thì thay vì phải load bức ảnh gốc, WordPress chỉ lấy file ảnh với kích thước medium của bức ảnh gốc.

Điều này giúp bạn giảm được băng thông trên máy chủ và thời gian xử lý trên máy của khách. Đây là điều hiển nhiên vì ảnh kích thước 600 × 400 chắc chắn sẽ load nhanh hơn 1200 × 800. Nhưng bạn cũng sẽ tốn dung lượng lưu trữ vì sẽ có nhiều file được tạo ra hơn.

Nếu bạn để hình ảnh gốc và thu nhỏ ảnh lại thì trình duyệt sẽ phải tốn tài nguyên để tính toán hiển thị hình ảnh phù hợp.Điều này tốn thời gian nếu website của bạn có nhiều hình ảnh.

Kích thước ảnh cho từng vị trí thích hợp

Ở phần hình ảnh chúng ta cần chú ý đến là ảnh chèn trong bài viết và ảnh đại diện (featured image). Với hình ảnh trong bài viết thì bạn chỉ cần chọn kích thước ảnh sao cho phù hợp với chiều rộng của phần hiển thị nội dung. Và cũng không quan trọng chuyện 2 ảnh có kích thước chênh lệch nhau vài chục px. Chúng ta sẽ chủ yếu tập trung vào ảnh đại diện. Vì ảnh đại diện sẽ được sử dụng nhiều nơi nên kích thước của ảnh cũng quan trọng hơn.

Một ví dụ cụ thể như khi hiển thị danh sách bài viết liên quan bạn có thể dùng kích thước 178×178. Với những thêm có hình ảnh nằm dưới tiêu đề bạn có thể sử dụng ảnh kích thước 1200×600.

Nếu bạn lưu nhiều ảnh với những kích thước khác nhau thì có thể dễ dàng truy cập vào từng kích thước cụ thể để chèn vào bài viết. Có câu hỏi đặt ra là ngoài 3 kích thước chuẩn của WordPress bạn muốn thêm những kích thước ảnh khác thì làm sao? Rất may là WordPress có hổ trợ chức năng này.

Tạo thêm kích thước ảnh thumbnail

Muốn thêm kích thước ảnh mới bạn có thể sử dụng function add_image_size() để thêm những kích thước hình ảnh mà website bạn cần. Bạn chỉ cần thêm đoạn code bên dưới vào file functions.php trong theme bạn sử dụng hoặc trong plugin.

Trong đó:

  • $name : tên của kích thước ảnh bạn muốn tạo.
  • $width : chiều rộng của ảnh. Set 9999 để chiều rộng dựa vào $height.
  • $height: chiều cao của ảnh
  • $crop:
    • false – tính theo tỉ lệ của ảnh gốc (ảnh đầy đủ nhưng kích thước không chuẩn)
    • true – cắt hình ảnh đúng với kích thước qui định (có thể mất vài chi tiết)
    • array – bạn sẽ đưa vào vị trí muốn cắt theo trục tọa độ (x_crop_position, y_crop_position)

Ví dụ minh họa:

Khi bạn thêm đoạn này vào theme hay plugin thì khi bạn thêm hình ảnh WordPress sẽ tự động tạo ra những ảnh với kích thước bạn đã qui định.

Cách sử dụng kích thước ảnh

Bạn có thể sử dụng function the_post_thumbnail() để lấy kích thước ảnh phù hợp với vị trí mà bạn mong muốn. Đây là hàm giúp lấy ảnh đại diện của bài viết. Bạn chỉ cần truyền vào tên kích thước ảnh mà bạn đã định nghĩa phía trên.

Với dòng code trên bạn sẽ lấy ảnh đại diện với kích thước 178×178 để sử dụng. Cách làm tương tự với kích thước ảnh khác.

Regenerating Thumbnails

Khi bạn thêm kích thước ảnh mới thì chỉ những ảnh nào được thêm vào sau mới có kích thước mới, còn những ảnh trước đó thì không. Vậy làm sao để tạo lại ảnh đại diện của ảnh củ với kích thước mới. Bạn có thể sử dụng plugin Regenerate Thumbnails. Plugin này có tác dụng giúp bạn tạo lại những ảnh cũ với kích thước ảnh mới. Ví dụ bạn thêm ảnh example.jpg thì sau khi sử dụng plugin trên bạn sẽ có những file ảnh kèm theo như example-178×178.jpg. Như vậy là đã xong bạn có thể sử dụng ảnh bình thường.

Responsive Images

Một vấn đề nữa là hình ảnh trong nội dung bài viết. Ví dụ bạn có một ảnh 600px ở bài viết với giao diện desktop thì quá đẹp nhưng ở giao diện mobile thì ảnh 600px lại quá to. Làm sao để hiển thị hình ảnh tùy vào chiều rộng của màn hình điện thoại. Nhiều bạn sẽ sử dụng cách dùng thuộc tính CSS max-width:100%. Đây cũng là một cách nhưng thật sự chưa tối ưu. Như mình đã nói ở trên nếu chúng ta thu nhỏ ảnh lại thì trình duyệt sẽ cần thời gian để tính toán lại kích thước hình ảnh. Ảnh càng lớn mà thu lại quá nhỏ sẽ càng tốn nhiều thời gian tính toán cũng như thời gian tải về.

Với vấn đề này mình xin giời thiệu đến các bạn plugin hammy. Đây là plugin dự trên chiều rộng của màn hình hiển thị sẽ tính toán bằng javascript để load ảnh với kích thước phù hợp.

Kết luận

Có rất nhiều cách để bạn có thể tối ưu hình ảnh trên website của mình. Nếu sử dụng kết hợp sẽ mang lại hiệu quả cao hơn. Nếu bạn có cách nào giúp tối ưu hình ảnh WordPress xin đừng ngại ngừng mà hãy bình luận bên dưới để mình có thể bổ sung thêm vào bài viết này.

Làm sao lấy thời gian hiện tại Timestamp trong Java

Trong công việc hay học tập thì ngoài PHP mình cũng hay đụng đến Java nên đôi lúc có những thứ cơ bản lại quên mất. Ví dụ như cách lấy thời gian hiện tại trong Java này.

Kết quả xuất ra:

Có rất nhiều cách để lấy thời gian hiện tại trong Java nhưng mình hay dùng cách này nên muốn chia sẻ với các bạn. Nếu bạn có cách tốt hơn hãy chia sẽ và mình sẽ bổ sung thêm vào bài viết này.

Cách đổi màu thuộc tính placeholder của thẻ input HTML

Nếu ngày trước để làm một ô nhập liệu có thể hiển thị chữ như “Nhập tên ở đây” khi click vào biến mất dòng chữ đó thì phải viết javasrcipt cũng khá là rắc rối. Bây giờ thì bạn chỉ cần thêm thuộc tính placeholder cho thẻ input là có thể làm được điều này:

Có một vấn đề là màu của thuộc tính placeholder này là màu xám. Nếu bạn để textbox là màu trắng thì không có gì, nhưng khi đổi sang màu khác thì đúng là thảm họa. Bài viết này mình sẽ bày cho bạn một cách nhỏ để đổi màu placeholder text, chỉ cần thêm những dòng dưới đây vào file css của bạn. Đoạn code này thì sẽ thay thế tất cả mày của placehoder thành màu đỏ. Nếu chỉ muốn 1 input nào đó thì chỉ cần gọi class hoặc id phía trước nó thôi.

Hi vọng bài viết này sẽ giúp ích cho các bạn. Nếu có bất cứ thắc mắc hay vấn đề gì các bạn cứ để lại comment để mính sẽ trả lời các bạn.

Cách lấy SEO Title của plugin Yoast WordPress SEO

Nếu bạn là dân SEO chắc hẳn sẽ biết plugin SEO by Yoast hay Wordress SEO. Đây là một trong những plugin SEO miển phí được nhiều người dùng WordPress sử dụng nhất vì sự mạnh mẽ cũng như được cập nhật liên tục các xu hướng SEO.

Plugin này giúp người dùng có thể tùy biến lại thẻ title, description,… của bài viết, trang chủ, category giúp cho website của bạn tối ưu SEO hơn. Bài viết này không hướng dẫn cài đặt hay sử dụng Yoast WordPress SEO mà mình sẽ hướng dẫn bạn cách lấy SEO Title để chèn vào bài viết, trang category, trang hiển thị taxonomy, tag,.. Đây là vấn đề mà nhiều khách hàng của mình gặp phải.

Lấy SEO Title của bài viết

Đối với bài viết thì có thể sử dụng hàm get_post_meta của wordpress để lấy giá trị trong ô SEO Title dễ dàng bằng code sau:

 Lấy Archive SEO titles

Nếu bạn có sử dụng Custom Post Type trên website của mình và bạn muốn lấy SEO Title của nó thì bạn sử dụng đoạn code dưới đây:

Bạn cần đổi POST_TYPE thành tên của post type mà bạn đang sử dụng.

Nếu bạn muốn in ra tất cả những biến

có thể sử dụng được:

Lấy Term SEO titles

Catgory và tags chỉ khác nhau ở cách lấy id bạn có thể tham khảo 2 đoạn code bên dưới:

Category

 Tags

Để lấy tất các những biến

bạn có thể dùng đoạn sau:

 

10 plugin miễn phí trang trí giáng sinh cho WordPress

Hôm nay đã là ngày 1 tháng 12, tháng Noel bạn đã chuẩn bị gì cho lễ Giáng Sinh năm nay chưa ? Nào là cây thông , nào là hang đá, đèn chớp, đèn nháy các kiểu. Vậy không có lý do gì bạn lại không trang trí cho blog của mình thêm phần xinh xắn vào mùa Noel 2014 này chứ.

Tất cả plugin mình giới thiệu dưới đây đã được thử nghiệm với phiên bản WordPress 4.1 mới nhất và sử dụng cho theme mặc định Twenty Fifteen. Bạn có thể yên tâm cài đặt plugin trang trí blog wordpress dưới đây:

Tribulant Snow Storm

Tribulant Snow Storm

 

Plugin giúp bạn tạo hiệu ứng tuyết rơi trên blog của mình. Bạn có thể cấu hình màu sắc của tuyết, số lượng tuyết rơi, hổ trợ cho điện thoại di động và tuyết sẽ đọng lại ở phía dưới màn hình của bạn.

Xmas Snow

xmas-snow

 

Thêm một plugin giúp tạo tuyết rơi trên website. Bạn chỉ cần cài đặt và kích hoạt plugin thế là xong, Không giống như những plugin khác, Xmas Snow sẽ tự động điều chỉnh số lượng tuyết rơi phù hợp đễ không làm ảnh hướng đến tốc độ website của bạn.

Improved Let It Snow!

improved-let-it-snow

 

Plugin này cho phép bạn cấu hình những thông số sau như tốc độ rơi, hình dáng, màu sắc, Rơi trong bao lâu thì sẽ lắp đầy màn hình.

Advent Calendar

advent-calendar

 

24 ngày kể từ ngày 01/12, Advent Calendar cho phép bạn tùy chỉnh một hình ảnh trên lịch webste của bạn. Plugin thích hợp cho những bạn có những bài viết, event đặc biệt trong dịp Noel này.

Christmas Countdown Widget

santas-countdown-widget

 

Plugin này cho phép bạn thêm một widget hình ông già Noel với bộ râu có thời gian đếm ngược đến Giáng Sinh. Nếu bạn không thích có thể dùng shortcode và thêm vào bất cứ đâu trên website mà bạn muốn.

Christmas Ball on Branch

christmas-ball-on-branch

 

Bạn muốn trang trí nhẹ nhàng cho blog mà không ảnh hưởng đến độc giả của mình thì đây là plugin bạn cần đấy. Christmas Ball on Branch sẽ thêm một số phần trang trí ở góc phải. Có cả đèn nữa đấy. Tuy plugin đã hơn 2 năm chưa cập nhật nhưng thử nghiệm trên phiên bản WordPress mới nhất vẩn chạy trơn tru.

Xmas Lights

christmas-lights

 

Thêm một dãy đèn Giáng sinh đầy máu sắc cho WordPress.

Snow, balloons and more

snow-balloons-and-more

 

Tác giả đã làm việc rất vất vả đề có plugin này. Bạn có thể thêm bông tuyết, ông già noel, cây thông, đèn giáng sinh trôi xuống trang web của bạn. Bạn có thể chọn từ 30 ảnh GIF và 40 ảnh PNG. Bạn có thể thay đổi tốc độ cũng như sức gió.

Holiday Message

holiday-message

 

Hiễn thị một thông báo chúc mừng giáng sinh đến người dùng. Bạn có thể tùy chỉnh vị trí của popup này và thay đổi hình ảnh cũng như màu sắc.

WP Scheduled Styles

schedule-styles

 

Plugin giúp bạn có thể thay đổi file style.css trong thời gian nhất định.

WP Scheduled Themes

schedule-themes

 

Plugin giúp thay đổi theme trong khoảng thời gian nhất định. Bạn có thể tạo nhiều theme khác nhau tùy vào từng mùa hoặc các ngày lễ lớn trong năm.

WP Christmas Class

christmas-class

Bạn có thể thêm một class mà bạn định sẳn ở thẻ body để thay đổi website của mình trong một khoảng thời gian.

Hello Christmas

hello-christmas

 

Khi kích hoạt thì plugin Jello Dolly sẽ bị tắt và hiển thị lời bài hát ngẫu nhiên những bài hát Giáng Sinh phổ biến ở góc phải trên cùng màn hình admin.

Khắc phục liên kết tiếng Việt bị xuống hàng trên Google Chrome mới nhất

Mấy hôm nay mình thấy nhiều Webmaster đau đầu kêu la khắp Facebook vì bổng nhiên blog của mình chạy bằng Chorme bị lổi menu.Qua quá trình tìm hiểu thì có nhiều bạn đã tìm ra cách giúp tạm thời sửa lỗi này trên website của mình trong khi chờ Google Update phiên bản mới.

Lỗi hiển thị tiếng Việt trên Google Chrome 39
Lỗi hiển thị tiếng Việt trên Google Chrome 39

Trong bài viết này mình sẽ hướng dẫn các bạn 2 cách để  liên kết tiếng Việt bị xuống hàng ở phiên bản Chrome 39.Vì đây là một lỗi của trình duyệt nên cần chờ Google cho ra bản Update thì mới chỉnh sửa triệt để vấn đề này.Chúng ta sẽ bắt đầu sửa lổi này:

Chỉnh sửa lỗi hiển thị tiếng Việt trên Google Chrome 39 bằng CSS

Cách sửa bằng CSS này có một nhược điểm là các từ trong liên kết sẽ nằm trên một hàng mà không xuống hàng nên sẽ gây ra tình trạng vỡ giao diện nếu những liên kết dài.Bạn chỉ cần thêm đoạn CSS này vào file css mà website bạn đang sử dụng.

Bạn tiến hành đổi tên .link thành tên class mà bạn muốn sửa lỗi.Cách sử lỗi này phù hợp nếu bạn là chủ một website và không muốn người dùng thấy website mình bị lỗi.

Chỉnh sửa bằng cách Bật tính năng Disable DirectWrite của Goolge Chrome

Còn nếu bạn là một người dùng cuối thì có thể dùng cách này để tránh bị lỗi khi lướt web bằng trình duyệt Google Chrome.Bạn tiến hành truy cập vào chrome://flags/

cach sua loi xuong hang tren trinh duyet chrome 39

Bạn ấn tổ hợp phím Ctrl + F và tìm cụm từ DirectWrite Kết quả tìm kiếm sẽ được bôi vàng bạn sẽ thấy dòng Disable DirectWrite nếu bạn dùng phiên bản tiếng Anh và Tắt DirectWrite nếu bạn dùng phiên bản tiếng Việt. 

sua loi font tieng viet tren website google chrome 39

khac-phuc-loi-sai-lech-tieng-viet-trong-google-chorme-39

 

Bạn nhấn vào Enable hoặc Bật, sau đó khởi động lại trình duyệt Chrome và nhìn kết  quả:

chinh sua loi hien thi tieng viet trinh duyen chrome moi nhat

Trên đây là cách giúp bạn có thể tạm thời sửa lỗi hiển thị menu tiếng Việt của Chrome mình vẩn hi vọng phiên bản tới Google sẽ sửa triệt để lỗi này vì số người dùng Google Chrome ở Việt Nam rất đông sẽ ảnh hưởng ít nhiều đến lượt truy cập vào website của bạn.

Chúc các bạn thành công !

Hướng dẫn sử dụng CSS3 Blending Mode

Nếu bạn đã từng dùng qua những trình chỉnh sửa hình ảnh như Photoshop hay Pixelmator thì chắc hẳn bạn sẽ nghe đến tính năng Blending Modes. Blending Mode là tập hợp các chế độ giúp pha trộn đối tượng này với các đối tượng khác, để tạo ra sự tương phản. Nếu bạn làm thành thục kỹ năng dùng Blending Mode thì có thể làm ra một bức hình như sau :

blend-mode-example

Blending Mode là một tính năng chỉ có thể tìm trong những trình chỉnh sửa hình ảnh Bây giờ thì bạn có thể thực hiện với CSS 3. Bây giờ chúng ta sẽ bắt đầu tìm hiểu xem blend màu bằng CSS 3.

Chuẩn bị

Để có thể nhìn thấy được hiệu ứng này trên Chrome thì bạn cần thực hiện vài bước dưới đây:

Truy cập vào chrome://flags và bật tính năng Web Platform Features lên.

web-platform-feature-enabled

Background and Mix Blend Mode

Hai thuộc tính mới được giới thiệu trong CSS3 mà chúng ta sẽ tìm hiểu trong bài viết này là mix-blend-modebackground-blend-mode.

Mix-blend-mode : Định nghĩa cách mà đối tượng sẽ pha trộn với những đối tượng phía dưới như thế nào.

Background-blend-mode : Đường dẩn màu nền , hình nền, và  background gradients.

Giống như Photoshop, Blending Modes trong CSS cũng có những thuộc tính như normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

Chế độ Blending Modes trong Photoshop
Chế độ Blending Modes trong Photoshop

Sử dụng CSS3 Blend Mode

Ở bài viết này mình sẽ dùng logo của Google để demo tính năng này, vì nó có nhiều màu sắc. Mình sẽ trộn màu lại với nhau để cho các bạn dễ thấy được sự khác nhau.

Đầu tiên chúng ta tạo ra một đoạn HTML chứa các ký tự của từ Google như sau:

Chúng ta sẽ dùng selector

  của CSS để tránh phải đặt tên từng class cho từng chữ cái. Chúng ta sẽ thêm màu vào cho từng chữ cái với giống như logo của Google bằng CSS như sau:

 

Ở đây các bạn chú ý đến dòng letter-spacing: -25px; nó có tác dụng điều chỉnh khoảng cách giữa hai ký tự trong một từ.Sau khi thêm css vào chúng ta sẽ được một logo như hình bên dưới:

lam-google-logo-bang-css

Bây giờ chúng ta sẽ áp blend mode vào:

Bạn sẽ thấy màu sắc giữa những phần giao nhau của các ý tự đã thay đổi. Vàng với xanh dương thành màu xanh lá cây.

google-logo-blended

Xem lại tất cả mã nguồn của bài viết:

Bài viết trên là một ví dụ đơn giản cho việc sử dụng CSS3 Blending Mode trong thiết kế Website. Hi vọng qua bài viết này sẽ giúp được các bạn trong quá trình học CSS cũng như tìm hiểu về CSS3.Mình cũng xin giới thiệu với các bạn link rất hữu ích về Blending Mode CSS3 với ví dụ trực quan và so sánh giữa việc dùng CSS3 và hình ảnh để làm hình nền mà bạn nên tham khảo.

Ví dụ và so sánh Blanding Mode CSS3 :http://bennettfeely.com/gradients/

Tài liệu về Blend Mode CSS3 : http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode

Chúc các bạn thành công !

 

Hướng cách xóa trường URL trong comment WordPress

Mã nguồn WordPress đang ngày càng được nhiều người biết đến và sử dụng.Rất nhiều blogger Việt đã chuyển từ các nền tảng blog khác sang wordpress vì nhiều lý do. Nhưng có một lý do mình thấy được khá nhiều đọc giả đồng ý là WordPress cho phép độc giả bình luận và thêm một link về website của mình.Trường Website trong mục bình luận của blog dùng WordPress như blog của mình ban đầu với mục đích tri ân độc giả giúp những ai bình luận sẽ nhận được một blacklink về website của mình, giúp tạo thêm động lực để người dùng để lại những bình luận hay trên blog.

Vấn đề spam comment trên blog WordPress

Với một blacklink về website từ các blog WordPress mà nhiều bạn đã spam vô tội vạ, lúc đầu còn spam thủ công dạng như : bài viết hay quá, hay, good,… sau nhiều bạn còn dùng những công cụ giúp spam comment hàng loạt. Vấn đề spam comment này đã làm nhiều blogger đau đầu và phải tìm những cách thay thế comment mặc định của wordpress bằng bên thứ ba như Facebook Comment, Disqus Comment System,… nhưng cũng phát sinh nhiều vấn đề bất cập.

Làm sao để hạn chế spam comment trên blog

Những ngày đầu làm blog, mổi ngày mình phải xóa đi vài chục đến cả trăm bình luận spam bằng những thứ tiếng mình không bao giờ hiểu được, nhiều lúc muốn bỏ hẳn comment nhưng vẩn muốn bạn bè vào chém gió nên chấp nhận sống chung với lũ. Nếu bạn đã cài đặt plugin chống spam Akismet thì có thể đỡ lo đi phần nào. Ngoài những cách chống spam trên blog wordpress mà mình đã chia sẽ thì hôm nay mình sẽ chia sẽ thêm một cách đó là xóa đi trường URL trong phần bình luận.

Trước khi thực hiện xóa bạn cần kiểm tra các bước sau để tránh xảy ra lỗi.

1. Kiểm tra theme đang dùng có file comments.php không ?

Nếu như theme bạn đang dùng không có file comments.php, WordPress sẽ dùng template mặc định ở đường dẩn /wp-includes/theme-compat/comments.php. Bạn tiến hành copy file comments.php vào thư mục theme wordpress đang dùng.

2. Kiểm tra file comments.php có thêm chèn form comment thủ công không ?

Trong file comments.php bạn sẽ nhìn thấy đoạn code <?php comment_form(); ?>  ở phía dưới cùng của file này. Ở hàm này bạn cần kiểm tra xem có tham số truyền vào nào liên quan đến trường URL không, nếu có thì xoá đi.Vậy là trường URL sẽ không còn xuất hiện nữa.

3. Xoá trường URL trong comment của WordPress

Theme bạn đang dùng có file comments.php và trong có gọi hàm <?php comment_form(); ?> Vậy bây giờ chúng ta sẽ bắt đầu xoá field URL đi.

Bạn chỉ cần mở file functions.php lên và thêm đoạn code dưới đây:

Sau khi hoàn thành bước trên là bạn đã xoá được trường Website URL trong form comment của WordPress rồi.

Có nên bỏ trường URL trong comment WordPress không ?

Vấn đề này tuỳ thuộc ở quyền quyết định của bạn. Nếu bạn có nhiều thời gian chăm sóc cho blog của mình thì nên để vì sẽ giúp blog thu hút thêm nhiều lượt bình luận hơn. Nếu kết hợp thêm một số plugin chống spam thì việc để hay không cũng không quan trọng lắm.