Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Bạn đang muốn thiết kế 1 theme WordPress hoàn chỉnh? Hãy click vào!

Chủ đề thuộc danh mục 'Hướng dẫn/thủ thuật dành cho Wordpress tại đây' được đăng bởi Phạm Hữu Dư, 4/11/13.

Lượt xem: 11,727

  1. Phạm Hữu Dư phamhuudu.com

    WordPress đang là nền tảng web/blog phổ biến nhất hiện nay! Nhiều website lớn trên thế giới đang sử dụng WordPress bởi vì đây là nền tảng SEO rất tốt, nhiều người sử dụng, cộng đồng hỗ trợ đông đảo và đặc biệt là kho tài nguyên giao diện và plugin đi kèm rất khổng lồ.

    Mặc dù theme WordPress chia sẻ trên mạng rất nhiều, từ free cho đến premium đều có đủ cả. Nhưng nếu bạn có khả năng design và code, thì hoàn toàn có thể tạo cho chính mình 1 WordPress Theme hoàn toàn đẹp theo ý thích của mình và do chính các bạn làm ra, hàng độc quyền luôn...

    Hôm nay mình xin chia sẻ 1 bài tổng hợp toàn bộ những thứ mà các bạn cần để thiết kế theme WordPress, từ thiết kế giao diện cho đến coding.

    1. DESIGNING YOUR THEME

    Đầu tiên bạn cần thiết kế giao diện của mình đã, bạn có thể thiết kế nó trên Photoshop, sau đây là các tutorial, tài nguyên Photoshop dành cho thiết kế theme WordPress...

    PHOTOSHOP TUTORIALS“BRUSH” UP ON YOUR PHOTOSHOP: 20 BLOG DESIGN TUTORIALS & .PSDS

    [​IMG]
    “Brush” up on your Photoshop: 20 Blog Design Tutorials & .PSDs »

    WORKING ON A MOVIE THEME

    [​IMG]
    Working on a Movie Theme »

    BRUSH UP ON YOUR PHOTOSHOP (PART 2): 20 HIGH QUALITY BLOG .PSDS

    [​IMG]
    Brush up on your Photoshop (Part 2): 20 High Quality Blog .PSDs »

    HOW TO CREATE A WORDPRESS THEME IN PHOTOSHOP
    [​IMG]
    How to create a wordpress theme in Photoshop »

    CREATE A MINIMAL WORDPRESS THEME IN PHOTOSHOP

    [​IMG]
    Create a Minimal WordPress Theme in Photoshop »

    PHOTOSHOP TEXTURES & PATTERNS20 REPEATABLE PIXEL PATTERNS

    [​IMG]
    20 Repeatable Pixel Patterns »

    APPLE IOS LINEN TEXTURE

    [​IMG]
    Apple iOS Linen Texture »

    PHOTOSHOP PATTERNS

    [​IMG]
    Photoshop Patterns »

    650+ FREE PHOTOSHOP PATTERNS

    [​IMG]
    650+ Free Photoshop Patterns »

    THE ULTIMATE COLLECTION OF FREE PHOTOSHOP PATTERNS

    [​IMG]
    The Ultimate Collection Of Free Photoshop Patterns »

    800+ PHOTOSHOP PATTERNS FOR YOUR NEXT WEB DESIGN PROJECT

    [​IMG]
    800+ Photoshop Patterns For Your Next Web Design Project »

    50 EXTREMELY BEAUTIFUL PHOTOSHOP PATTERNS FOR ELEGANT DESIGNS

    [​IMG]
    50 Extremely Beautiful Photoshop Patterns for Elegant Designs »

    8 SEAMLESS “DARK METAL GRID” PATTERNS

    [​IMG]
    8 Seamless “Dark Metal Grid” Patterns »

    MASTERING PHOTOSHOP: NOISE, TEXTURES, GRADIENTS AND ROUNDED RECTANGLES

    [​IMG]
    Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles »

    20 SUPERB ADOBE PHOTOSHOP TEXTURES

    [​IMG]
    20 Superb Adobe Photoshop Textures »

    2. CODING THE HTML / CSS
    Sau khi đã có giao diện rồi thì bạn bắt đầu tiến hành viết code HTML/CSS cho nó, và sau đây là 1 số phần mềm hỗ trợ code, các tài nguyên như javascript sliders, các dropdown menu để tích hợp vào giao diện WordPress của bạn...

    SOFTWARENOTEPAD ++

    [​IMG]
    Notepad ++ »

    COFFEECUP FREE HTML EDITOR

    [​IMG]
    CoffeeCup Free HTML Editor »

    HTML KIT

    [​IMG]
    HTML Kit »

    PS PAD

    [​IMG]
    PS Pad »

    CSS FRAMEWORKSBLUEPRINT

    [​IMG]
    Blueprint »

    THE 1140PX GRID SYSTEM

    [​IMG]
    The 1140px Grid System »

    LESS FRAMEWORK 4

    [​IMG]
    Less Framework 4 »

    THE SQUARE GRID

    [​IMG]
    The Square Grid »

    EZ CSS

    [​IMG]
    EZ CSS »

    ATATONIC

    [​IMG]
    Atatonic »

    BASELINE

    [​IMG]
    Baseline »

    TOAST

    [​IMG]
    Toast »

    960 GRID SYSTEM

    [​IMG]
    960 Grid System »

    SLIDERSEASY SLIDER 1.7 – NUMERIC NAVIGATION JQUERY SLIDER

    [​IMG]
    Easy Slider 1.7 – Numeric Navigation jQuery Slider »

    NIVO SLIDER

    [​IMG]
    Nivo Slider »

    25 AWESOME FREE JQUERY IMAGE SLIDERS AND CAROUSELS

    [​IMG]
    25 Awesome Free jQuery Image Sliders and Carousels »

    USEFUL JQUERY IMAGE SLIDERS AND GALLERIES TUTORIALS

    [​IMG]
    Useful jQuery Image Sliders and Galleries Tutorials »

    WOW SLIDER

    [​IMG]
    Wow Slider »

    20 USEFUL JQUERY PHOTO GALLERY AND SLIDER PLUGINS COLLECTION

    [​IMG]
    20 Useful jQuery Photo Gallery and Slider Plugins Collection »

    DROPDOWN MENUSSUPERFISH

    [​IMG]
    Superfish »

    SEXY DROP DOWN MENU W/ JQUERY & CSS

    [​IMG]
    Sexy Drop Down Menu w/ jQuery & CSS »

    SLIDING JQUERY MENU

    [​IMG]
    Sliding Jquery Menu »

    PERFECT SIGNIN DROPDOWN BOX LIKE TWITTER WITH JQUERY

    [​IMG]
    Perfect signin dropdown box like Twitter with jQuery »

    HOW TO BUILD A KICK-BUTT CSS3 MEGA DROP-DOWN MENU

    [​IMG]
    How to Build a Kick-Butt CSS3 Mega Drop-Down Menu »

    CSS3 DROPDOWN MENU

    [​IMG]
    CSS3 Dropdown Menu »

    CREATE VIMEO-LIKE TOP NAVIGATION

    [​IMG]
    Create Vimeo-like top navigation »

    FANCY DROP DOWN MENUS USING CSS AND JQUERY

    [​IMG]
    Fancy Drop Down Menus Using CSS and JQuery »

    A DIFFERENT TOP NAVIGATION

    [​IMG]
    A Different Top Navigation »

    ANIMATED DROP DOWN MENU WITH JQUERY

    [​IMG]
    Animated Drop Down Menu with jQuery »

    3. CODING THE WORDPRESS THEME
    Sau khi đã hoàn thành xong giao diện HTML và CSS, bạn cần phải áp dụng nó vào WordPress. Tiếp theo sẽ những thành phần giúp cấu tạo nên Theme Options Panel và xây dựng nên các Shortcodes...

    BLANK THEMES / FRAMEWORKSSTARKERS THEME

    [​IMG]
    Starkers Theme »

    HYBRID CORE

    [​IMG]
    Hybrid Core »

    THEMATIC, A WORDPRESS THEME FRAMEWORK

    [​IMG]
    Thematic, A WordPress Theme Framework »

    PRESSWORK

    [​IMG]
    PressWork »

    TOOLBOX: AN HTML5 WORDPRESS STARTER THEME

    [​IMG]
    Toolbox: An HTML5 WordPress Starter Theme »

    WHITEBOARD FRAMEWORK

    [​IMG]
    Whiteboard Framework »

    ROOTS THEME

    [​IMG]
    Roots Theme »

    THEME OPTIONS PANELSTHE UPTHEMES FRAMEWORK

    [​IMG]
    The UpThemes Framework »

    OPTIONS FRAMEWORK

    [​IMG]
    Options Framework »

    HOW TO CREATE A BETTER WORDPRESS OPTIONS PANEL

    [​IMG]
    How to Create a Better WordPress Options Panel »

    CREATE A WORDPRESS THEME OPTIONS PANEL

    [​IMG]
    Create a WordPress Theme Options Panel »

    WORDPRESS THEME OPTIONS PANEL FRAMEWORK

    [​IMG]
    WordPress Theme Options Panel Framework »

    SHORTCODESWORDPRESS SHORTCODES: THE RIGHT WAY

    [​IMG]
    WordPress Shortcodes: The Right Way »

    WORDPRESS SHORTCODE TUTORIAL: SIMPLE TO ADVANCED PART 1

    [​IMG]
    WordPress Shortcode Tutorial: Simple to Advanced Part 1 »

    GETTING STARTED WITH WORDPRESS SHORTCODES

    [​IMG]
    Getting Started With WordPress Shortcodes »

    WORDPRESS SHORTCODE TINYMCE BUTTON TUTORIAL PART 2

    [​IMG]
    WordPress Shortcode TinyMCE Button Tutorial Part 2 »

    CREATING A TOGGLE SHORTCODE FOR WORDPRESS FAQ’S PAGE

    [​IMG]
    Creating A Toggle Shortcode For WordPress FAQ’s Page »

    SHORTCODES ULTIMATE

    [​IMG]
    Shortcodes Ultimate »

    J SHORTCODES

    [​IMG]
    J Shortcodes »

    SHORTCODES PRO

    [​IMG]
    Shortcodes Pro »

    4. TESTING YOUR THEME
    Phần cuối cùng của quá trình thiết kế theme WordPress đó là kiểm tra thử xem nó có lỗi lầm gì không trước khi đưa nó lên chạy online. Bạn có thể tạo hàng loạt các data demo để test, ví dụ như comments, tags, hình ảnh,...Có khá nhiều plugin hỗ trợ việc này, bạn có thể tham khảo dưới đây...

    TEST DATATHEME UNIT TEST

    [​IMG]
    Theme Unit Test »

    PLUGINS FOR TESTINGDEBUG QUERIES

    [​IMG]
    Debug Queries »

    LOG DEPRECATED NOTICES

    [​IMG]
    Log Deprecated Notices »

    DEBUG BAR

    [​IMG]
    Debug Bar »

    THEME CHECK

    [​IMG]
    Theme Check »

    Đây là bài tổng hợp từ trang WPLift.com, các bạn có thể click vào từng ảnh demo hoặc liên kết dưới để đi đến bài viết cụ thể hơn :)

  2. banbaonylong

    banbaonylong Ko phải assmin

    :D ko biết php thì viết 1 theme cực lắm :D, mà viết xong cũng chỉ ngang mấy theme default của WP :D
  3. mgr

    mgr Cựu quản trị

    Chất thật... ít ra mình cũng tưởng tượng ra trình tự là như thế :D
  4. huyengoc

    huyengoc Banned

    bài viết quá chi tiết, đối với gà như em thì tuyệt vời!
  5. quocvuongpro

    quocvuongpro Mới đăng kí

    Chỉ hiểu sơ sơ quá trình thôi chứ toàn dùng đồ có sẵn chứ không làm được trình tự.Bây giờ sửa code có sẵn cũng là vấn đề rồi.
  6. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    quocvuongpro nắm rõ CSS với chút HTML là có thể sửa giao diện WP có sẵn theo ý mình muốn rồi còn gì :D

Ủng hộ diễn đàn