WordPress cơ bản : Chèn logo / hình ảnh vào trong template

31/05/2014

Thông thường, khi chúng ta sử dụng những theme có sẵn , thì chúng tích hợp sẵn chức năng cho phép chúng ta upload logo của riêng mình, hoặc những hình ảnh khác nếu cần. Tuy nhiên, nếu bạn là người mới bắt đầu tìm hiểu về WordPress cũng như muốn tự tay tạo riêng một theme cho riêng mình thì việc đặt logo hoặc hình ảnh vào trong theme sẽ khiến bạn cảm thấy bối rối và không biết phải đặt như thế nào cho đúng.

wordpress-logo

Thực ra việc chèn logo hoặc hình ảnh vào trong theme rất đơn giản. Đầu tiên các bạn cần upload hình ảnh cần làm logo vào trong folder theme mà các bạn muốn chèn. Giả sử chúng ta đặt nó vào trong folder images bên trong theme của các bạn, thì việc chèn vào sẽ như sau :

– Mở file  “header.php” rồi chèn vào nó đoạn code sau để hiển thị logo :

<img src="<?php echo get_stylesheet_directory_uri()?>/images/logo.png" alt="My Logo">

get_stylesheet_directory_uri() sẽ trả về đường dẫn đến folder theme mà các bạn đang dùng. Ví dụ như  :  http://www.mysite.com/wp-content/themes/my-theme . Ngoài ra nếu các bạn muốn chèn link vào logo thì các bạn có thể sử dụng đoạn code sau :

<h1 class="site-title">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
        <img src="<?php echo get_stylesheet_directory_uri()?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>">
    </a>
</h1>

Bài viết này tuy ngắn ngủi và đơn giản, nhưng nó lại là những điều cơ bản nhất cho những bạn đang mới học và tìm hiểu về WordPress. Mình hy vọng là nó sẽ giúp ích cho các bạn trong việc quản lý những trang web được viết bằng WordPress của các bạn sau này.

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

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Phong Vân

    bác có thể giúp em cách chuyễn logo song ngữ trong web được ko, ví dụ như chọn giao diện tiếng việt thì logo hiện tiếng việt, và tiếng anh cũng như thế.

    • Nguyễn Văn Mạnh – Sapa

      Không biết trong WP các biến language cho ra giá trị “en” hoặc “vi”, nếu như vậy thì mình hay code như sau: đặt tên file kiểu my-logo-.png / Các file logo lần lượt đặt là my-logo-en.png và my-logo-vi.png…