如何将Html网站转换为WordPress商业主题(Part1)

有许多企业仍然依赖简单的HTML网站进行在线展示。这些HTML网站通常是静态的。这意味着即使更改网站上的小细节也可以通过编辑编码文件来完成,以避免这种情况,您可以将网站HTML转换为WordPress。

在本教程中,我将教授如何将HTML转换为WordPress业务主题。这样可以保持所有HTML元素的完整性,同时也为WordPress提供了自定义任何元素的灵活性。

如果您熟悉HTML和WordPress,那么本教程对您有好处。如果您是新手,请尝试使用虚拟网站。

在第1部分中,我们将完成主页元素。

  • 将HTML网站转换为WordPress
  • 您需要哪些WordPress文件
  • 配置CSS,JavaScript和图像
  • 添加WordPress功能以添加功能

那么,让我们从以下10个步骤开始吧。

  • 第1步:先决条件
  • 第2步:命名您的主题
  • 第3步:创建PHP文件
  • 第4步:复制CSS,图像和JavaScript(JS)文件夹
  • 第5步:将HTML细分为标题,索引和页脚
  • 第6步:配置CSS
  • 第7步:配置JavaScript
  • 第8步:在WordPress中启用自定义标题
  • 第9步:在WordPress中添加自定义导航菜单
  • 骤10:添加最新帖子以显示在主页上
    在本教程中,我获取了一个免费的HTML模板。在转换任何商业主题时,这些技术将保持不变。

    我们需要详细了解下HTML主题,并标记标题,主体和页脚的元素。

    第1步:先决条件

    已经安装了WordPress。

    第2步:命名您的主题

    通过FTP客户端访问WordPress目录并导航到WP Content> Themes

    在Themes文件夹中,创建一个新文件夹并命名主题。

    第3步:创建PHP文件

    每个WordPress安装都有两个必需文件style.cssindex.php。我们将创建更多文件以更好地组织我们的主题。创建以下内容:

    1. style.css(包含主题样式和CSS文件)
    2. index.php(如果未声明其他可选文件,则提供主要内容)
    3. header.php(包含主题的标题元素)
    4. footer.php(包含主题的页脚元素)
    5. functions.php(包含WordPress主题中的函数)

    我们将逐个解析每个文件。

    第4步:复制CSS,图像和JavaScript(JS)文件夹

    从您的HTML主题里,将CSS,JS和images文件夹复制到新的WordPress主题文件夹里。

    第5步:将HTML细分为标题,索引和页脚

    本教程选择的主题编码良好。页眉,页脚和主体标有HTML注释。

    我们要做的是将HTML <head>从已下载主题的index.html复制到我们在WordPress主题文件夹中创建的header.php文件中。从<!DOCTYPE html>复制到</ head>

    类似地,我们将分别将来自index.html的footerbody元素复制到footer.phpindex.php中。从<footer>复制到</ html>footer.php文件。

    我们还需要在index.php中添加“ content ”和“ body ”代码。从<body id =“page1”>复制到</ section><! – footer – >之前

    index.php文件顶部添加WordPress函数get_header(),末尾添加get_footer()

    <?php get_header (); ?>
    

    get_header()是一个调用header.php的内置函数,类似地,get_footer()是一个调用footer.php的函数。

    要调用页脚,请在index.php的末尾插入以下代码

    <?php get_footer (); ?>
    

    现在,访问您的WordPress管理仪表板。导航到外观>主题并激活新创建的主题。访问您的网站,您将看到类似的内容。

    第6步:配置CSS

    我们的主题看起来很奇怪的事实是因为CSS文件没有应用于主题。

    我们已经将CSS主题的HTML文件夹复制到我们的WordPress主题文件夹中。现在,我们需要调用这些CSS文件以完成主题的外观。

    请记住,CSS文件的名称可能不同。所以在进行此过程之前要仔细检查。

    还有一件事,在header.php文件中,我们需要调用CSS样式表。

    header.php中

    将以下代码:

    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
    

    有替换为:

    <link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/layout.css'; ?>" type="text/css" media="screen">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/reset.css'; ?>" type="text/css" media="screen">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/style.css'; ?>" type="text/css" media="screen">
    

    get_template_directory_uri()用于获取当前模板目录路径。它将当前路径与相应文件连接起来。

    第7步:配置JavaScript

    我们正在使用的HTML主题是使用JavaScript。我们也可以轻松配置它。

    header.php文件中,已经调用了JavaScript文件。我们需要做的就是安全地调用它们并将它们与当前目录路径连接起来。

    在第2部分中,我们将使用wp_enqueue_script() WordPress内置函数来调用JS文件,以便在将来增加更多的灵活性。

    header.php中的 JavaScript最终代码应该如下所示。

    <script src="<?php echo get_template_directory_uri().'/js/jquery-1.6.min.js'; ?>" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri().'/js/cufon-yui.js'; ?>" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri().'/js/cufon-replace.js'; ?>" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri().'/js/Open_Sans_400.font.js'; ?>" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri().'/js/Open_Sans_Light_300.font.js'; ?>" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri().'/js/Open_Sans_Semibold_600.font.js'; ?>" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri().'/js/tms-0.3.js'; ?>" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri().'/js/tms_presets.js'; ?>" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri().'/js/jquery.easing.1.3.js'; ?>" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri().'/js/FF-cash.js'; ?>" type="text/javascript"></script>
    

    给出图像的路径; 在src 标记中添加以下PHP代码。

    <img src="<?php echo get_template_directory_uri().'/img/tm.jpg';?>" alt="Image" >
    
    

    现在,我们的主题看起来与我们的HTML主题类似。但是,它缺少WordPress功能,例如更改网站标题,显示主页上的最新博客帖子以及自定义导航菜单

    第8步:在WordPress中启用自定义标题

    如果我们进入WordPress管理面板并更改网站的标题,那么它将不会对网站的标题产生任何影响。要启用此功能,我们可以在header.php文件中的标题标记之间使用带有参数“ name ”的WordPress内置函数bloginfo()

    <img src="<?php echo get_template_directory_uri().'/img/tm.jpg';?>" alt="Image" >
    
    

    现在,我们的主题将选择我们在WP-admin面板中的设置 – >常规 – >网站标题设置的标题

    第9步:在WordPress中添加自定义导航菜单

    首先,当您访问我们网站的WordPress管理员并导航到外观时,您将看不到菜单的选项。

    我们需要首先在functions.php文件中添加以下代码行来启用Menu

    <?php
    add_theme_support( 'menus' );
    ?>
    

    这将启用我们主题中的菜单功能,但我们需要定义显示自定义菜单的位置。

    为此,我们首先需要找到HTML主题导航菜单的位置,然后使用WordPress内置函数wp_nav_menu()替换它你可以阅读更多关于这个功能在这里

    在我们的主题中,我们的index.php包含导航菜单。找到以下代码行:

    <li><a class="active" href="index.html">Home Page</a></li>
    <li><a href="news.html">Our News</a></li>
    <li><a href="services.html">Our Services</a></li>
    <li><a href="products.html">Our Products</a></li>
    <li class="last-item"><a href="contacts.html">Contact Us</a></li>
    

    将以上行替换为:

    <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
    

    我们的自定义菜单现在将显示在我们的主题上,并为我们的WordPress商业主题增加灵活性。

    步骤10:添加最新帖子以显示在主页上

    大多数人可能已经看到WordPress支持的网站通常在主页上显示最新的帖子。

    我们正在使用的主题在最近的新闻下有一个部分。我们可以用它来显示我们最新的WordPress博客文章。

    为此,我们需要首先找到静态HTML代码来显示帖子。您可以在Recent News下的index.php中找到它。

    静态HTML是:

    <time class="tdate-1 fleft" datetime="2011-05-29"><strong>29</strong>may</time>
    <div class="extra-wrap">
    <h5>Utatse eudui pretium</h5>
    sodales proin fermen<br>
    tum condimentum eros quis tincidunt fraesent eleifend tempor nisi, in adipiscing... <a href="#">more</a> </div>
    </div>
    <div class="wrapper">
    <time class="tdate-1 fleft" datetime="2011-05-24"><strong>24</strong>may</time>
    <div class="extra-wrap">
    <h5>Felis molestie vitae</h5>
    Sed massa justo pellen<br>
    tesque turpis lorem, ornare sit amet vulpate at, consectetur vitae nunc... <a href="#">more</a> </div>
    

     

    将整个代码替换为:

    <ul>
    <?php $the_query = new WP_Query( 'showposts=2' ); ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <li><?php echo substr(strip_tags($post->post_content), 0, 100);?></li>
    <?php endwhile;?>
    </ul>
    
     WP_query(); 是一个WordPress类,用于调用WordPress帖子和页面的详细信息。我们可以使用上面的循环显示最近新闻部分下的最新博客文章。

     

    上面代码中使用的函数的解释:

      • the_permalink()调用博客文章的URL
      • the_title()调用帖子的标题
    • have_posts()将检查最新的博客帖子

    我们将在此结束第1部分。我们现在有一个灵活的WordPress主题,这是一个简单的静态HTML业务主题。

    在第2部分中,我们将制作更多文件来显示保持主题完整的博客帖子。我们将添加小部件区域和主题支持来更改徽标,滑块图像等等,以使我们的WordPress真正灵活。


WPNicer,专注Wordpress主题及小程序 » 如何将Html网站转换为WordPress商业主题(Part1)

提供最优质的资源集合

立即查看 了解详情