Chuyển trang web của bạn từ HTML sang WordPress có thể là một nhiệm vụ khó khăn. Tìm hiểu cách dễ dàng chuyển đổi trang web của bạn từ HTML tĩnh sang WordPress từng bước ngay bây giờ.

Bạn đang xem : cách chuyển đổi tệp html sang trang web

Con đường từ các trang web được xây dựng bằng HTML thuần túy đến WordPress không phải là ngắn. Từ trải nghiệm toàn văn bản, thiết kế web đã chuyển sang sự hiện diện web có tính tương tác cao. Ngoài ra, chúng tôi không còn phải tự viết đánh dấu nữa mà có thể để hệ thống quản lý nội dung thực hiện công việc nặng nhọc .

Tuy nhiên, điều đó không nghĩa là các trang web HTML tĩnh không còn tồn tại nữa. Trên thực tế, HTML5, phiên bản mới nhất của ngôn ngữ đánh dấu, rất mạnh mẽ và cho phép bạn xây dựng các trang web chất lượng mà không cần CMS đằng sau chúng.

Tuy nhiên, thị trường đang phát triển chia sẻ của WordPress cho thấy ngày càng có nhiều người chuyển sang nền tảng này.

Đối với một số người, điều đó có nghĩa là chuyển từ HTML tĩnh sang WordPress. Đây có thể là một nhiệm vụ khó khăn, nhưng bài đăng này sẽ cố gắng giải thích cách thực hiện nó theo một vài cách đơn giản.

Dưới đây, chúng tôi sẽ chỉ cho bạn một số cách chuyển đổi từ HTML sang WordPress. Trước tiên, bạn sẽ tìm hiểu các tùy chọn khác nhau là gì cũng như ưu và nhược điểm của chúng. Sau đó, chúng tôi sẽ hướng dẫn bạn cách thực thi từng bước một.

Hãy bắt đầu.

3 cách để chuyển từ HTML tĩnh sang WordPress

< p> Để chuyển từ HTML sang WordPress, bạn cần chuyển thiết kế HTML của mình thành một chủ đề WordPress. Chủ đề kiểm soát giao diện và cảm giác của một trang web WordPress, trong khi chức năng được cung cấp bởi chính CMS cũng như các plugin bổ sung .

Để thực hiện chuyển đổi, bạn có một số tùy chọn. Cái nào phù hợp với bạn phụ thuộc vào các yếu tố như thời gian và tiền bạc bạn có thể và sẵn sàng đầu tư, kỹ năng viết mã của bạn và sở thích cá nhân. Sau đây là các tùy chọn chính.

Tùy chọn đầu tiên cũng là tùy chọn kỹ thuật nhất. Nếu bạn đi theo con đường này, bạn sẽ lấy mã hiện có của mình và sử dụng nó làm điểm khởi đầu để tạo các tệp chủ đề WordPress.

Nó không quá phức tạp, đặc biệt nếu bạn có kinh nghiệm viết mã. Bạn có thể hoàn thành nó với một chút kiến ​​thức về HTML, CSS và một số PHP. Rất nhiều trong số đó là sao chép và dán.

Nhược điểm: mặc dù bạn sẽ kết thúc với một chủ đề WordPress hoạt động, nhưng nó sẽ không có tất cả các tính năng mà WordPress cung cấp. Ví dụ: trừ khi bạn xây dựng nó sau thực tế, trang web của bạn sẽ không có các khu vực tiện ích hoặc khả năng thay đổi menu của bạn từ phần phụ trợ WordPress.

Mặc dù trang web của bạn sẽ hoạt động nhưng bạn sẽ không có thể quản lý nó hoàn toàn thông qua WordPress. Vì lý do đó, cá nhân chúng tôi thích lựa chọn tiếp theo hơn.

Theo chúng tôi, đây có lẽ là con đường dễ dàng và hợp lý nhất về mặt công sức và đầu tư tiền bạc. Thay vì sử dụng trang web hiện tại của bạn làm điểm khởi đầu, thay vào đó, bạn sử dụng một chủ đề WordPress được tạo sẵn. Sau đó, bạn chỉ điều chỉnh thiết kế của nó để nó giống với trang web cũ của bạn.

Làm như vậy cho phép bạn tận dụng tối đa WordPress trong khi vẫn giữ được giao diện trang web cũ của mình. Bạn cũng sẽ không phải thêm các tính năng của WordPress sau đó. Thay vào đó, bạn có thể xây dựng trên một chủ đề hiện có – thứ mà nền tảng WordPress được tạo ra một cách rõ ràng.

Rõ ràng, nếu bạn không kiên quyết sử dụng thiết kế hiện tại của mình và sẵn sàng thay đổi nó, mọi thứ sẽ trở nên đồng đều dễ dàng hơn. Trong trường hợp đó, tất cả những gì bạn cần làm là thiết lập một trang web, cài đặt chủ đề và nhập nội dung HTML của bạn. Như bạn sẽ thấy bên dưới, đây là một quá trình rất nhanh chóng và không tốn nhiều công sức.

A) Cách chuyển đổi thủ công HTML sang chủ đề WordPress

Nếu mục tiêu của bạn là bắt đầu lại từ đầu và tạo chủ đề WordPress của riêng bạn giống với trang web HTML hiện có của bạn, bắt đầu từ đây.

Đừng lo lắng nếu điều đó nghe có vẻ đáng sợ, bạn sẽ thấy rằng nó chẳng khác gì. Chỉ cần một vài tệp và thư mục cũng như một số bản sao và dán là tất cả những gì cần thiết.

1. Tạo Thư mục Chủ đề và Tệp Cơ bản

Điều đầu tiên bạn cần làm là tạo một thư mục chủ đề mới. Bạn có thể thực hiện điều đó trên máy tính để bàn của mình như đối với thư mục trên máy tính. Đặt tên cho nó là bất cứ thứ gì bạn muốn chủ đề của mình được gọi.

Sau đó, đi tới trình chỉnh sửa mã và tạo một số tệp văn bản. Đặt tên cho chúng như sau:

  • style.css
  • index.php
  • < code> header.php
  • sidebar.php
  • footer.php
  • Đừng làm bất cứ điều gì với chúng, hãy giữ các tệp mở trong trình chỉnh sửa. Bạn sẽ sớm cần đến chúng.

    2. Sao chép CSS hiện có vào WordPress Style Sheet

    Bây giờ đã đến lúc chuẩn bị bảng định kiểu WordPress (tệp style.css bạn vừa tạo) để sao chép CSS của trang web cũ của bạn vào đó. Để làm điều đó, hãy mở tệp và dán như sau:

     / *
    Tên chủ đề: Twenty Thirteen
    URI chủ đề: https://wordpress.org/themes/twentythirteen
    Tác giả: nhóm WordPress
    URI của tác giả: https://wordpress.org/
    Mô tả: Chủ đề 2013 cho WordPress đưa chúng ta trở lại blog, có đầy đủ các định dạng bài đăng, mỗi định dạng được hiển thị đẹp mắt theo cách độc đáo của riêng chúng. Có rất nhiều chi tiết thiết kế, bắt đầu với một bảng màu sống động và hình ảnh tiêu đề phù hợp, kiểu chữ và biểu tượng đẹp mắt cũng như bố cục linh hoạt trông tuyệt vời trên mọi thiết bị dù lớn hay nhỏ.
    Phiên bản: 1.0
    Giấy phép: Giấy phép Công cộng GNU v2 trở lên
    URI cấp phép: https://www.gnu.org/licenses/gpl-2.0.html
    Tags: đen, nâu, cam, nâu, trắng, vàng, sáng, một cột, hai cột, thanh bên phải, chiều rộng linh hoạt, tiêu đề tùy chỉnh, menu tùy chỉnh, kiểu trình chỉnh sửa, hình ảnh nổi bật, vi định dạng, định dạng hậu kỳ, rtl-ngôn ngữ-hỗ trợ, cố định, sẵn sàng dịch
    Tên miền văn bản: hai mươi lăm
    
    * / 

    Đây là cái được gọi là tiêu đề của trang định kiểu (Quan trọng: đừng bỏ qua thẻ /*...*/ nhận xét!). Điền vào từng phần như sau:

    • Tên chủ đề – Đây là tên chủ đề của bạn. Nó có thể là bất cứ thứ gì bạn muốn nhưng nó thường giống với tên của thư mục chủ đề của bạn.
    • URI chủ đề – Bạn thường đăng trang chủ của chủ đề ở đây nhưng bạn có thể sử dụng địa chỉ trang web.
    • Tác giả – Đó là bạn. Đặt tên riêng của bạn ở đây hoặc bất kỳ tên nào bạn muốn được gọi.
    • URI tác giả – Liên kết đến trang chủ của bạn. Đó có thể là chủ đề bạn đang xây dựng hoặc bất kỳ thứ gì có ý nghĩa.
    • Mô tả – Mô tả tùy chọn về chủ đề của bạn. Điều này sẽ hiển thị trong chương trình phụ trợ của WordPress.
    • Phiên bản – Phiên bản chủ đề của bạn. Vì bạn không xuất bản nó nên điều đó không thực sự quan trọng. Chúng tôi thường đặt 1.0 ở đây.
    • Giấy phép, URI cấp phép, Thẻ – Những thứ này chỉ quan trọng nếu bạn định gửi chủ đề của mình cho Thư mục chủ đề WordPress . Bạn có thể loại bỏ chúng trong trường hợp này, chúng tôi chỉ đưa chúng vào để hoàn thiện.

    Sau tiêu đề, hãy sao chép và dán CSS hiện có từ trang web HTML tĩnh của bạn. Sau đó, lưu tệp trong thư mục chủ đề mới của bạn và đóng nó. Đã đến lúc chuyển sang phần còn lại.

    3. Tách HTML Hiện tại của bạn

    Đối với phần tiếp theo, bạn cần hiểu rằng WordPress thường sử dụng PHP để lấy thông tin từ cơ sở dữ liệu của nó. Vì lý do đó, bạn cần phải chia nhỏ HTML hiện tại của mình thành các phần khác nhau để CMS có thể ghép chúng lại với nhau một cách chính xác.

    Mặc dù điều này nghe có vẻ phức tạp, nhưng điều đó có nghĩa là bạn sao chép và dán các phần của HTML của mình tài liệu thành một số tệp PHP. Để chứng minh điều này tốt hơn, chúng tôi đã tổng hợp một trang ví dụ đơn giản mà bạn có thể xem bên dưới.

    Như bạn có thể thấy, đó rất nhiều là một mẫu HTML tiêu chuẩn bao gồm tiêu đề, nội dung vùng, thanh bên và chân trang. Mã đi kèm là sau:

     & lt;! doctype html & gt;
    & lt; html & gt;
        & lt; đầu & gt;
        & lt; meta charset = "utf-8" & gt;
        & lt; title & gt; Tiêu đề Trang web & lt; / title & gt;
        & lt; meta name = "description" content = "Mô tả trang web" & gt;
        & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" & gt;
    
        & lt; link rel = "stylesheet" href = "style.css" & gt;
        & lt; / head & gt;
    
        & lt; body & gt;
            & lt; div class = "header-container" & gt;
          & lt; header class = "wrapper clearfix" & gt;
            & lt; h1 class = "title" & gt; Tiêu đề Trang web & lt; / h1 & gt;
            & lt; nav & gt;
              & lt; ul & gt;
                & lt; li & gt; & lt; a href = "#" & gt; nav mục # 1 & lt; / a & gt; & lt; / li & gt;
                & lt; li & gt; & lt; a href = "#" & gt; nav mục # 2 & lt; / a & gt; & lt; / li & gt;
                & lt; li & gt; & lt; a href = "#" & gt; nav mục # 3 & lt; / a & gt; & lt; / li & gt;
              & lt; / ul & gt;
            & lt; / nav & gt;
          & lt; / tiêu đề & gt;
        & lt; / div & gt;
    
        & lt; div class = "main-container" & gt;
          & lt; main class = "main wrapper clearfix" & gt;
            & lt; bài báo & gt;
              & lt; header class = "entry-header" & gt;
                & lt; h2 class = "entry-title" & gt; Tiêu đề Bài viết & lt; / h2 & gt;
              & lt; / tiêu đề & gt;
                & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Motorcyula ante. Etiam bibendum iaculis libero, eget moltie nisl pharetra in. Trong semperequat est, eu porta velit mollis chưa được xác định. & Lt; / p & gt;
                & lt; h2 & gt; Tiêu đề phụ & lt; / h2 & gt;
                & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Motorcyula ante. Etiam bibendum iaculis libero, eget moltie nisl pharetra in. Trong semperequat est, eu porta velit mollis. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin trong est sed eratosystemisis pharetra. & Lt; / p & gt;
                & lt; h2 & gt; Tiêu đề phụ & lt; / h2 & gt;
                & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Motorcyula ante. Etiam bibendum iaculis libero, eget moltie nisl pharetra in. Trong semperequat est, eu porta velit mollis. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin trong est sed eratosystemisis pharetra. & Lt; / p & gt;
            & lt; / bài báo & gt;
            & lt; sang một bên & gt;
              & lt; h3 & gt; Thanh bên & lt; / h3 & gt;
              & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Motorcyula ante. Etiam bibendum iaculis libero, eget moltie nisl pharetra in. Trong semperequat est, eu porta velit mollis. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. & Lt; / p & gt;
            & lt; / sang một bên & gt;
          & lt; / main & gt; & lt ;! - #main - & gt;
        & lt; / div & gt; & lt ;! - # main-container - & gt;
    
        & lt; div class = "footer-container" & gt;
          & lt; footer class = "wrapper" & gt;
            & lt; p class = "footer-credits" & gt; © 2019 Trang web tưởng tượng của tôi & lt; / p & gt;
          & lt; / footer & gt;
        & lt; / div & gt;
      & lt; / body & gt;
    & lt; / html & gt; 

    Nếu thiết kế của bạn khác, bạn có thể phải điều chỉnh phần nào các bước bên dưới. Tuy nhiên, quy trình tổng thể vẫn giống nhau.

    Trước tiên, hãy mở index.html hiện tại của bạn (tệp chính của trang web HTML của bạn). Sau đó, xem qua các tệp WordPress mới tạo của bạn và sao chép nội dung sau vào chúng (các ví dụ bên dưới là đánh dấu của tôi):

    header.php

    Mọi thứ từ đầu tệp HTML của bạn vào vùng nội dung chính (thường được ký hiệu bằng & lt; main & gt; hoặc & lt; div class = "main" & gt; ) đi vào tệp này. Ngoài ra, ngay trước nơi có nội dung, & lt; / head & gt; sao chép và dán & lt;? Php wp_head ();? & Gt; . Điều này rất quan trọng để nhiều plugin WordPress hoạt động bình thường.

     & lt;! Doctype html & gt;
      & lt; html & gt;
        & lt; đầu & gt;
          & lt; meta charset = "utf-8" & gt;
          & lt; title & gt; Tiêu đề Trang web & lt; / title & gt;
          & lt; meta name = "description" content = "Mô tả trang web" & gt;
          & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" & gt;
          & lt; link rel = "stylesheet" href = "style.css" & gt;
          & lt;? php wp_head ();? & gt;
        & lt; / head & gt;
      & lt; body & gt;
        & lt; div class = "header-container" & gt;
          & lt; header class = "wrapper clearfix" & gt;
            & lt; h1 class = "title" & gt; Tiêu đề Trang web & lt; / h1 & gt;
            & lt; nav & gt;
              & lt; ul & gt;
                & lt; li & gt; & lt; a href = "#" & gt; nav mục # 1 & lt; / a & gt; & lt; / li & gt;
                & lt; li & gt; & lt; a href = "#" & gt; nav mục # 2 & lt; / a & gt; & lt; / li & gt;
                & lt; li & gt; & lt; a href = "#" & gt; nav mục # 3 & lt; / a & gt; & lt; / li & gt;
              & lt; / ul & gt;
            & lt; / nav & gt;
          & lt; / tiêu đề & gt;
        & lt; / div & gt;
      & lt; div class = "main-container" & gt;
        & lt; main class = "main wrapper clearfix" & gt; 

    sidebar.php

    Mọi thứ thuộc phần & lt; sang một bên & gt;

     & lt; sang một bên & gt;
      & lt; h3 & gt; Thanh bên & lt; / h3 & gt;
      & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing ưu tú. Aliquam sodales urn không ghét tính khí nóng nảy. Nunc về ante xe. Etiam bibendum iaculis libero, riêng molti nisl pharetra in. Trong mọi trường hợp, tôi mặc quần áo nhuyễn thể có velit. Curabiture sở hữu tính khí turpis feugiat của riêng mình. Etiam Ullamcorper Lorem Dapibus Velit Suscipit Ultrices. & Lt; / p & gt;
    & lt; / sang một bên & gt; 

    footer.php

    Bây giờ, tất cả những gì còn lại từ cuối thanh bên đến cuối tệp sẽ là thông tin chân trang, ở đây. Sau đó, thêm lệnh gọi cho & lt;? Php wp_footer ();? & Gt; ngay trước dấu ngoặc đóng & lt; / body & gt; với cùng lý do như bạn đã thêm <

     & lt; / main & gt; & lt ;! - #main - & gt;
        & lt; / div & gt; & lt ;! - # main-container - & gt;
      & lt; div class = "footer-container" & gt;
        & lt; footer class = "wrapper" & gt;
          & lt; p class = "footer-credits" & gt; © 2019 Trang web tưởng tượng của tôi & lt; / p & gt;
        & lt; / footer & gt;
      & lt; / div & gt;
        & lt;? php wp_footer ();? & gt;
      & lt; / body & gt;
    & lt; / html & gt; 

    Sau đó, bạn đã hoàn tất với index.html và bạn có thể đóng nó. Nếu bạn có bất kỳ tệp nào khác, hãy lưu thư mục chủ đề của bạn và đóng chúng. Bạn còn một số việc phải làm với chúng.

    4 “WordPressify” Header.php và Index.php

    Đối với tiêu đề, tất cả những gì còn lại là thay đổi lệnh gọi biểu định kiểu từ HTML sang định dạng WordPress. Để làm như vậy, hãy tìm liên kết hiện có trong phần & lt; head & gt; . Nó có thể trông giống như sau:

     & lt; link rel = "stylesheet" href = "style.css" & gt; p> 
     & lt; link rel = "stylesheet" href = "& lt;? php echo get_template_directory_uri (); / & gt; 

    Tuyệt vời, bây giờ bạn có thể lưu và đóng header.php . Sau đó quay lại index.php . Nó sẽ trống vào lúc này. Vì vậy, trước tiên, hãy sao chép và dán những dòng mã này:

     & lt;? Php get_header (); ? & gt;
    
    & lt;? php get_pagebar (); ? & gt;
    & lt;? php get_footer (); ? & gt; 

    Sau đây là các lệnh gọi cho các tệp khác chứa phần còn lại của trang web của bạn. Bạn có thể nhận thấy khoảng trống giữa lệnh gọi tiêu đề và thanh bên. Vòng lặp

    Vòng lặp thứ hai là một phần của WordPress nơi CMS xuất ra nội dung được tạo trong phần phụ trợ. Điều quan trọng là nếu bạn muốn WordPress thêm nội dung động vào các trang mà bạn sẽ nhập sau này. Để kết thúc, hãy dán phần này vào đây ngay sau & lt;? Php get_header (); ? & gt; :

     & lt;? php while (have_posts ()): the_post (); ? & gt;
      & lt; article class = "& lt;? php post_class ();? & gt;" id = "post- & lt;? php the_ID ();? & gt;" & gt;
        & lt; h2 class = "entry-title" & gt; & lt;? php the_title (); ? & gt; & lt; / h2 & gt;
        & lt;? php if (! is_page ()):? & gt;
          & lt; section class = "entry-meta" & gt;
          & lt; p & gt; Được đăng trên & lt;? php the_date ();? & gt; bởi & lt;? php the_author ();? & gt; & lt; / p & gt;
          & lt; / phần & gt;
        & lt;? php endif; ? & gt;
        & lt; section class = "entry-content" & gt;
          & lt;? php the_content (); ? & gt;
        & lt; / phần & gt;
        & lt; section class = "entry-meta" & gt; & lt;? php if (count (get_the_category ())):? & gt;
          & lt; span class = "category-links" & gt;
            Đăng dưới: & lt;? Php echo get_the_category_list (','); ? & gt;
          & lt; / span & gt;
        & lt;? php endif; ? & gt; & lt; / section & gt;
      & lt; / bài báo & gt;
    & lt;? php cuối cùng; ? & gt; 

    Bây giờ, hãy lưu tệp index.php và đóng nó. Làm tốt! Chủ đề cơ bản của bạn đã sẵn sàng. Bây giờ bạn có thể thêm nó vào trang WordPress mới của mình.

    5 Tạo ảnh chụp màn hình và tải lên chủ đề

    Giờ đây, bạn có thể thêm ảnh chụp màn hình chủ đề, cùng với thông tin từ tiêu đề biểu định kiểu của bạn, sẽ dùng làm bản xem trước trang web của bạn trong phần phụ trợ WordPress.

    < p> p> Để làm điều đó, hãy mở trang web hiện có của bạn trong trình duyệt và chụp ảnh màn hình bằng phương pháp bạn muốn. Sau đó, mở phần mềm chỉnh sửa hình ảnh mà bạn chọn và cắt nó thành 880 × 660 pixel. Lưu dưới dạng screenshot.png cho thư mục chủ đề của bạn. Bây giờ bạn đã sẵn sàng tải lên chủ đề của mình.

    Để tải chủ đề mới lên trang web WordPress của mình, bạn có một số tùy chọn. Tuy nhiên, điều kiện tiên quyết là tất cả các tệp đều nằm bên trong thư mục chủ đề của bạn.

    Tùy chọn đầu tiên là tạo một tệp zip từ đó. Sau đó, truy cập trang web WordPress của bạn rồi đến Giao diện & gt; Chủ đề. Tại đây, nhấp vào Thêm mới ở trên cùng, sau đó nhấp vào Tải lên chủ đề. Chọn nó và nhấp vào Mở, sau đó Cài đặt ngay. Khi hoàn tất, hãy kích hoạt chủ đề.

    Ngoài ra, bạn có thể kết nối với máy chủ của mình qua FTP (hoặc chỉ cần truy cập thư mục cục bộ trên ổ cứng của bạn) và điều hướng đến wp-content / themes. Sau đó, tải lên thư mục chủ đề (đã giải nén) của bạn ở đó. Sau đó, kích hoạt chủ đề từ cùng một nơi như trước.

    Tuyệt vời! Giao diện người dùng của trang web mới bây giờ sẽ giống như trang web cũ của bạn. Tất cả những gì còn lại để hoàn tất quá trình chuyển từ HTML sang WordPress là nhập nội dung hiện có của bạn. Chúng tôi sẽ đề cập kỹ hơn vấn đề này bên dưới khi nói về việc sử dụng một chủ đề WordPress hiện có.

    Tuy nhiên, hãy lưu ý rằng mặc dù chủ đề cơ bản hiện hoạt động, nhưng bạn có thể làm thêm nhiều điều để tích hợp HTML của mình tốt hơn với WordPress. Điều này bao gồm làm cho tiêu đề và mô tả blog của bạn có thể chỉnh sửa , thêm các khu vực tiện ích , nhận xét, và nhiều hơn nữa. Bạn cũng có thể phải thêm đánh dấu CSS vì nội dung không phải là một phần của thiết kế ban đầu của bạn, chẳng hạn như hình ảnh.

    Vì đây là công việc rất nhiều, cá nhân chúng tôi muốn sử dụng một giải pháp đã có tất cả các chức năng đó và chỉ cần một thay đổi thiết kế. Đó là những gì chúng tôi sẽ giới thiệu cho bạn tiếp theo.

    B) Chuyển HTML sang WordPress thông qua Chủ đề con WordPress

    Nếu những điều trên có vẻ quá khó đối với bạn, phương pháp tiếp theo có thể là dễ quản lý hơn. Nó cho phép bạn tận dụng lợi thế của hàng nghìn chủ đề WordPress hiện có trong khi vẫn giữ nguyên thiết kế ban đầu của bạn.

    Đó là bằng cách sử dụng cái gọi là chủ đề con. Các chủ đề này được xây dựng dựa trên chủ đề khác (chủ đề chính) không tự đứng mà chỉ sửa đổi chủ đề chính để phù hợp với nhu cầu của bạn. Đủ dễ dàng để thực hiện mặc dù hơi tốn công trinh thám.

    1. Chọn một chủ đề phù hợp

    Bước đầu tiên là chọn một chủ đề phù hợp để làm cơ sở cho thiết kế của bạn. Vì vậy, sẽ hữu ích khi tìm một chủ đề gần với thiết kế hiện có của bạn hoặc sử dụng khung chủ đề hoặc chủ đề mới bắt đầu, cả hai đều được tạo ra để làm cơ sở cho các chủ đề tùy chỉnh.

    Kiểm tra thư mục chủ đề WordPress , danh sách các chủ đề tuyệt vời của chúng tôi hoặc xem xét các chủ đề cao cấp để tìm một ứng cử viên phù hợp. Sau một số tìm kiếm, chúng tôi quyết định rằng chủ đề Twenty Twelve sẽ là một điểm khởi đầu tốt cho việc chuyển từ HTML sang WordPress của tôi. Thông thường, chúng tôi sẽ chọn thứ gì đó cập nhật hơn, nhưng nó phù hợp với thiết kế đơn giản mà chúng tôi đang làm việc.

    Sau khi bạn đã chọn, hãy cài đặt chủ đề trên trang web WordPress của bạn giống như cài đặt bất kỳ chủ đề. Không cần phải kích hoạt nó. Như đã đề cập, nó chỉ ở đó để cung cấp cơ sở cho bạn làm việc. Phần còn lại diễn ra trong chủ đề con.

    2. Tạo một thư mục mới

    Tương tự như phương pháp trước đó, đối với chủ đề con, bạn cần tạo một thư mục chủ đề. Đây là nơi bạn sẽ đặt tất cả các tệp thuộc về nó.

    Khi tạo chủ đề con, thông thường người ta thường gọi thư mục cùng tên với chủ đề mẹ cộng với -child . Vì vậy, vì chủ đề con của chúng tôi dựa trên chủ đề Twenty Twelve, chúng tôi gọi thư mục của nó là hai mươi hai mươi hai-con .

    Dù bạn chọn tên gì, chỉ cần đảm bảo không bao gồm bất kỳ khoảng trắng nào như nó sẽ không hoạt động theo cách đó.

    3. Thiết lập Biểu định kiểu

    Chủ đề con cũng cần có biểu định kiểu. Cái này sẽ hoạt động gần giống như style sheet đã tạo ở trên. Tuy nhiên, nó có tiêu đề hơi khác và sẽ chứa ít mã hơn.

    Chúng ta sẽ chuyển sang phần thứ hai sau. Bây giờ, hãy tạo style.css thông thường và đặt nó vào thư mục chủ đề. Sau đó, thêm phần sau:

     / *
     Tên chủ đề: Twenty Fifteen Child
     URI chủ đề: https://example.com/twenty-fifteen-child/
     Mô tả: Chủ đề Twenty Fifteen Child
     Tác giả: John Doe
     URI của tác giả: https://example.com
     Bản mẫu :entyfifteen
     Phiên bản: 1.0.0
     Giấy phép: Giấy phép Công cộng GNU v2 trở lên
     URI cấp phép: https://www.gnu.org/licenses/gpl-2.0.html
     Tags: sáng, tối, hai cột, thanh bên phải, bố cục đáp ứng, sẵn sàng trợ năng
     Tên miền văn bản: hai mươi mười lăm con
    * / 

    Như bạn có thể thấy, nó rất giống với tiêu đề trang định kiểu mà bạn đã sử dụng trước đây với một ngoại lệ: nó chứa thẻ Mẫu.

    Trong phần đó, bạn nên đặt tên của chủ đề sẽ hoạt động với tư cách là chủ đề. Nếu không có nó, chủ đề con sẽ không hoạt động. Để tránh điều này, hãy nhập tên thư mục gốc. Vì vậy, đối với Twenty Twelve, đó sẽ là Mẫu: hai mươi hai .

    4. Tạo Functions.php và Kế thừa các Kiểu gốc

    Chỉ với biểu định kiểu và thư mục, bạn đã có thể kích hoạt chủ đề con. Tuy nhiên, điều đó sẽ không tốt lắm vì ngay bây giờ trang web của bạn sẽ trông giống như một trang HTML mà không có bất kỳ kiểu dáng nào.

    Để thay đổi điều đó, trước tiên bạn cần kế thừa các kiểu gốc và để làm được điều đó, bạn cần < mã> functions.php. Tệp này là một phần quan trọng của bất kỳ cài đặt WordPress nào và cho phép bạn thực hiện các thay đổi sâu rộng đối với trang web của mình.

    Tuy nhiên, trong trường hợp này, bạn sẽ chỉ sử dụng nó để gọi kiểu gốc. Để làm được điều đó, hãy tạo một tệp mới và gọi nó là functions.php . Điều đầu tiên bạn sẽ thêm ngay từ đầu là:

     & lt;? Php 

    Với thẻ PHP mở, về mặt lý thuyết, tệp đã sẵn sàng nhưng nó chưa chưa làm gì cả. Vì vậy, ngoài ra, bạn sẽ phải nhập cái này:

     function child_theme_enqueue_styles () {
    
        $ parent_style = 'kiểu cha mẹ';
    
        wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
        wp_enqueue_style ('kiểu trẻ em',
            get_stylesheet_directory_uri (). '/style.css',
            mảng ($ parent_style),
            wp_get_theme () - & gt; get ('Phiên bản')
        );
    }
    add_action ('wp_enqueue_scripts', 'child_theme_enqueue_styles'); 

    Đoạn mã này yêu cầu WordPress đi đến thư mục mẫu (hay còn gọi là chủ đề mẹ) và sử dụng các kiểu có trong đó. Nó cũng giúp bạn có thể sửa đổi chủ đề thông qua chủ đề con của bạn (sẽ tìm hiểu thêm về điều đó ở phần sau).

    5. Kích hoạt Chủ đề con

    Tại thời điểm này, chủ đề con đã sẵn sàng để được kích hoạt.

    Bạn có thể thêm ảnh chụp màn hình vào đó như trong hướng dẫn ở trên nếu muốn. Ngoài ra, bạn có thể nén nó lên và thêm nó vào WordPress thông qua Appearance & gt; Chủ đề & gt; Thêm Mới & gt; Tải lên Chủ đề hoặc chỉ cần thêm thư mục vào wp-content / themes.

    Trong cả hai trường hợp, khi bạn kích hoạt chủ đề, trang web của bạn bây giờ sẽ giống hệt như trang gốc của nó.

    6. Điều chỉnh Thiết kế

    Đây là nơi bắt đầu công việc thám tử nói trên. Bây giờ đã đến lúc thay đổi thiết kế của chủ đề hiện tại để nó giống với trang web HTML ban đầu của bạn.

    Ví dụ: một trong những điều nổi bật đầu tiên là chủ đề WordPress của chúng tôi thêm không gian phía trên tiêu đề và bên dưới chân trang mà trang web HTML của chúng tôi không có.

    Để khắc phục điều này, chúng tôi có thể xem trang web HTML bằng công cụ dành cho nhà phát triển trình duyệt để tìm trách nhiệm đánh dấu. Khi làm như vậy, chúng ta gặp phải trường hợp này:

     body {
        lề: 0;
    } 

    Sau đó, chúng tôi làm tương tự với chủ đề WordPress mới của tôi, nơi chúng tôi tìm thấy các kiểu sau:

     body .site {
        margin-top: 48px;
        margin-top: 3,428571429rem;
        margin-bottom: 48px;
        margin-bottom: 3.428571429rem;
    } 

    Mục tiêu của tôi bây giờ là áp dụng kiểu từ trang web HTML cho chủ đề WordPress. Trong trường hợp này, chúng tôi có thể đạt được điều này đơn giản bằng cách thêm phần sau vào style.css :

     body .site {của theme con tôi
        margin: 0 auto;
    } 

    Sau khi lưu, chủ đề WordPress có các kiểu mới được áp dụng cho nó:

    Đó là vì bất kỳ thứ gì bạn thêm vào biểu định kiểu của chủ đề con sẽ ghi đè các kiểu trong cha mẹ của nó. Tuy nhiên, phần còn lại của đánh dấu vẫn còn nguyên, vì vậy bạn chỉ có thể thay đổi những thứ có liên quan.

    Ngoài ra, nếu bạn đang sử dụng mẫu HTML5 làm chủ đề mới bắt đầu và chủ đề WordPress hiện đại làm chủ đề chính của mình. , rất nhiều điểm đánh dấu cơ bản sẽ tương ứng, giúp cuộc sống của bạn dễ dàng hơn nhiều.

    Sau khi bạn điều chỉnh xong thiết kế, đã đến lúc nhập nội dung của bạn. Hãy bắt đầu ngay bây giờ.

    C) Nhập Nội dung từ HTML sang WordPress Sử dụng Plugin

    Cuối cùng, trong danh sách chuyển từ HTML sang WordPress đang sử dụng chủ đề như hiện tại và chỉ cần di chuyển nội dung của bạn từ trang web HTML của bạn vào đó. Đây là cách đơn giản nhất - tất cả những gì bạn cần làm là cài đặt và kích hoạt chủ đề bạn chọn (chúng tôi cho rằng bây giờ bạn đã biết cách làm điều đó) rồi làm theo các bước bên dưới.

    Nhân tiện, mặc dù quá trình này không quá khó nhưng vẫn có những điều có thể xảy ra. Vì lý do đó, hãy đảm bảo bạn sao lưu trang web WordPress của mình trước khi thực hiện.

    1. Cài đặt Trình cắm nhập khẩu

    Điều đầu tiên bạn cần làm là cài đặt trình cắm Nhập HTML 2 . Cách dễ nhất để đạt được điều này là truy cập Plugins & gt; Thêm Mới và tìm kiếm nó theo tên. Khi bạn tìm thấy nó trên danh sách (nó có thể nằm ở phía dưới), hãy nhấp vào Cài đặt ngay. Kích hoạt nó khi hoàn tất.

    2. Chuẩn bị Nhập

    Để nhập nhiều trang cùng một lúc, bạn cần tải chúng lên cùng một máy chủ như cài đặt WordPress của bạn. Plugin sẽ đề xuất một cái gì đó như html-files-to-import tên thư mục nhưng bạn có thể chọn bất cứ thứ gì bạn muốn. Chỉ cần nhớ tên đường dẫn.

    Như bạn sẽ thấy trong phần sau, bạn cũng có thể nhập từng trang một. Đối với một trong hai phương pháp, hãy truy cập WordPress và Cài đặt & gt; Nhập HTML. Bây giờ chúng ta sẽ xem xét các cài đặt cơ bản nhất. Nếu bạn cần thêm thông tin hoặc nếu có gì chưa rõ, hãy tham khảo hướng dẫn sử dụng chính thức .

    Tệp

    Định cấu hình màn hình này như sau:

    • Thư mục cần nhập - Nhập đường dẫn mà bạn vừa sao chép các tệp hiện có của mình vào.
    • URL của trang web cũ - Được sử dụng để chuyển hướng. Nhập URL cũ của bạn. Chúng tôi sẽ giải quyết vấn đề này một lần nữa ở phần sau của bài viết này.
    • Tệp mặc định —Tệp mặc định cho các thư mục trên trang web cũ, thường là index.html .
    • Phần mở rộng tệp cần bao gồm - Phần mở rộng của tệp bạn muốn nhập.
    • Thư mục cần loại trừ - Nếu bạn có các thư mục trong trang web cũ mà bạn không muốn nhập, hãy nhập chúng vào đây.
    • Giữ nguyên tên tệp - Để plugin tự động sử dụng tên tệp của bạn làm URL mới, đánh dấu vào ô này. Điều này có ý nghĩa nếu tiêu đề của bạn quá dài vì thông thường, nhà nhập khẩu sẽ sử dụng chúng để tạo slug.

    Nội dung

    Trong nội dung, bạn cần định cấu hình HTML có chứa nội dung trang web của bạn.

    Để làm điều đó, hãy chọn thẻ HTML tùy chọn ở trên cùng. Sau đó, định cấu hình thẻ trong ba trường sau. Ví dụ: nếu nội dung của bạn được chứa trong thẻ có tên & lt; div id = "main" & gt; , thông tin bạn nhập sẽ là div , id < / code> và main .

    Các cài đặt khác trên trang này phải tự giải thích và cho phép bạn nhập hình ảnh, tài liệu, cập nhật liên kết nội bộ, v.v.

    Tiêu đề & amp; Siêu dữ liệu

    Phần này tương tự như phần nội dung trước đây. Tuy nhiên, nó đang xử lý tiêu đề trang. Ngay từ đầu, bạn cần cho plugin biết cách tiêu đề được đánh dấu trong mẫu HTML của bạn để nó có thể nhập chúng vào đúng vị trí.

    Ngoài ra, bạn có thể lọc ra những thứ thừa như tiêu đề trang web. vì nó thường được hiển thị bởi các chủ đề WordPress theo mặc định. Nếu tiêu đề của bạn nằm bên trong nội dung, bạn cũng có thể yêu cầu nhà nhập khẩu xóa chúng đi để chúng không được đưa vào hai lần.

    Điều quan trọng là bạn quyết định có nhập nội dung cũ của mình như bài đăng hay trang hay không. Phần còn lại khá dễ hiểu và cho phép bạn định cấu hình cài đặt WordPress cho các trang mới.

    Trường tùy chỉnh

    Nếu bạn có bất kỳ dữ liệu nào cần nhập vào tùy chỉnh , bạn có thể định cấu hình trường này tại đây.

    Danh mục & amp; Thẻ

    Tại đây, bạn có thể chỉ định các danh mục, thẻ và định dạng bài đăng cho nội dung đã nhập của mình. Plugin sẽ hiển thị phân loại hiện có trên trang web của bạn để làm cho bước này dễ dàng hơn.

    Công cụ

    Màn hình này liệt kê một số công cụ hữu ích để nhập thành công từ HTML sang WordPress.

    3. Bắt đầu nhập

    Khi bạn đã hoàn tất, hãy lưu cài đặt. Thao tác này sẽ kích hoạt nút Nhập tệp. Nhấp vào nó để bắt đầu.

    (Lưu ý: bạn cũng có thể truy cập vào đây thông qua Công cụ & gt; Nhập và sau đó chọn Chạy Trình nhập trong tùy chọn HTML.)

    Tiếp theo, chọn nhập một thư mục tệp hay một tệp (bạn cần duyệt đến), sau đó nhấn Gửi. Sau đó, plugin sẽ hoạt động.

    Sau khi hoàn tất, bạn sẽ có tất cả nội dung hiện có trên trang web WordPress của mình và được định dạng theo chủ đề mới. Hoặc, nếu bạn đã đi một trong các lộ trình khác, trang web của bạn về cơ bản sẽ giống với trang web HTML trước đây của bạn. Tuyệt vời!

    Các bước bổ sung

    Nếu bạn có kế hoạch triển khai trang web WordPress ở cùng một nơi đã từng sử dụng trang web HTML tĩnh, có một số việc cần làm trước khi hoàn thành .

    Cách đầu tiên là kiểm tra URL của các bài đăng và trang mới được nhập của bạn để đảm bảo chúng thân thiện với công cụ tìm kiếm (tức là bao gồm các từ khóa bạn muốn xếp hạng). Nó rất đơn giản - chỉ cần truy cập một trang hoặc bài đăng và xem URL bên dưới tiêu đề.

    Để thay đổi nó, hãy nhấp vào Chỉnh sửa ở bên phải, thay đổi thành URL của bạn và nhấn Ok.

    Điều thứ hai là triển khai chuyển hướng từ URL cũ sang URL mới. Bằng cách đó, bạn sẽ không mất giá trị SEO hiện có.

    Nếu bạn đã điền địa chỉ trang web cũ vào plugin HTML, nó sẽ tạo mã chuyển hướng cho bạn. Bạn có thể sao chép và dán tệp này vào tệp .htaccess nằm trên máy chủ của bạn (thường là trong thư mục gốc).

    Bạn truy cập nó qua FTP, tuy nhiên, bạn có thể phải cho phép xem các tệp ẩn vì nó không hiển thị theo mặc định. Sau đó, hãy chỉnh sửa .htaccess và nhập các quy tắc.

    Hãy lưu ý rằng nó chỉ hoạt động nếu bạn giữ nguyên các URL. Nếu bạn chưa và cần đặt chuyển hướng tùy chỉnh, hãy sử dụng plugin chuyển hướng . Đó là một giải pháp rất thoải mái cũng theo dõi bất cứ khi nào ai đó truy cập vào một URL không tồn tại trên trang web của bạn. Bằng cách đó, bạn cũng có thể triển khai chuyển hướng cho các liên kết đó.

    Bạn đã chuyển thành công từ HTML sang WordPress chưa?

    Và thế là xong. Bạn vừa học cách chuyển đổi một trang HTML tĩnh sang WordPress. Do đó, bạn đã trở thành một phần của một trong những cộng đồng lớn nhất trên web và có quyền truy cập vào hàng nghìn tài nguyên để cải thiện trang web của bạn.

    Tùy thuộc vào giải pháp bạn chọn ở trên, bạn đã nhận được ấn tượng về cách hoạt động của WordPress. Kể từ đây, thật dễ dàng để phân nhánh và đi sâu hơn vào tạo trang web bằng nền tảng WordPress . Nếu bạn cần trợ giúp thêm trong lĩnh vực này, trang web này có rất nhiều thứ. Bạn có thể tìm hiểu cách:

    Ngoài ra, chúng tôi chúc bạn may mắn với trang web WordPress mới đúc của mình. Chúng tôi hy vọng bạn thích làm việc với WordPress nhiều như chúng tôi.

    Bạn có chuyển trang web của mình từ HTML sang WordPress không? Kinh nghiệm của bạn như thế nào? Bất kỳ lời khuyên để thêm? Vui lòng cho chúng tôi biết trong phần bình luận bên dưới.


Xem thêm những thông tin liên quan đến chủ đề làm thế nào để chuyển đổi tập tin html sang trang web

[laptrinhtoday.com] Hướng dẫn chuyển HTML tĩnh sang ASP.NET

  • Tác giả: Lap Trinh Today
  • Ngày đăng: 2015-02-08
  • Đánh giá: 4 ⭐ ( 9704 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tutorial hướng dẫn này của mình nhầm giúp các bạn mới biết lập trình có thể tự chuyển các giao diện mà mình thiết kế trên HTML và chuyển nó thành ASP.NET để có thể code và chèn dữ liệu vào website.
    Mọi chi tiết các bạn có thể theo dõi tại website http://laptrinhtoday.com

Cách để Tạo một trang web đơn giản với HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 3 ⭐ ( 3996 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Tạo một trang web đơn giản với HTML. Đây là bài viết hướng dẫn cách tạo một trang web đơn giản với HTML (ngôn ngữ đánh dấu siêu văn bản). HTML là một trong những thành phần cốt lõi của mạng lưới toàn cầu World Wide Web và tạo nên...

Chuyển đổi trang web HTML sang trang web WordPress

  • Tác giả: tinhocvanphong.com.vn
  • Đánh giá: 3 ⭐ ( 5773 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong thời kỳ đầu (của web), tất cả các trang web đều được tạo ra bằng văn bản và HTML tĩnh. Tuy nhiên bây giờ, hơn 20 năm sau web là một nơi khác rất

URL sang WEBP (Trực tuyến miễn phí) — Convertio

  • Tác giả: convertio.co
  • Đánh giá: 4 ⭐ ( 3941 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tốt nhất để chuyển đổi file HTML sang WEBP chỉ trong vài giây. 100% miễn phí, bảo mật, và dễ sử dụng! Convertio — công cụ trực tuyến cao cấp có thể giải quyết mọi vấn đề với bất kỳ loại file nào.

Tạo trang web đơn giản và đưa lên Internet

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 3191 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo một trang web đơn giản và đưa trang web lên một máy chủ web

Cách tạo và thêm thuộc tính HTML bằng JavaScript

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 3 ⭐ ( 7576 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Trang web là gì? Trang web động, web tĩnh khác nhau như thế nào?

  • Tác giả: blog.webico.vn
  • Đánh giá: 3 ⭐ ( 5985 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trang web là gì? Trang web là gì? Trang web, có thể hiểu là một tập hợp các trang web con với các nội dung vô cùng đa dạng từ văn bản, hình ảnh, video, flash, landing page… Trang web được truy cập và nằm trong một tên miền chính hoặc các tên miền phụ. Trang […]

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tự Học PHP - mvc trong php

By ads_php