如何使用Html、Css和JS添加页面?

时间:2015-09-18 作者:Lewis Menelaws

所以我有一个客户,他想要一点额外的东西,这超出了我购买的wordpress主题的能力。我知道通过html、css和js,我可以从头开始创建它(他们需要动画和整洁的登录页)。我想知道是否有一种方法或插件可以用来直接使用所有代码创建页面。对不起,如果我没有很好地解释我的问题!

2 个回复
最合适的回答,由SO网友:JediTricks007 整理而成

您可以在WordPress中创建自定义模板,在模板顶部定义模板名称。这是一个基本模板,应该可以帮助您入门。您可以使用tmp mycustomname这样的文件名保存模板。php并将其放入主题中。您可能应该创建一个子主题,以便在客户端更新主题时保存此自定义模板并添加其他CSS,而不会丢失它。

<?php
/*
* Template Name: Template name goes here
*/
?>
<?php get_header(); ?>
<div class="row">
  <div class="col-md-12">
      
    Your content can go here.

    <script> alert ("my javascript is working"); </script>

  </div>
</div>
<?php get_footer(); ?>
创建模板后,请转至第页(>);添加新的。然后您应该会看到类似这样的内容,您可以在下拉列表中找到自定义模板。

page template

有用的链接:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/

SO网友:Hasan Sumon

您可以按照JediTricks007所示的方式进行操作。但是,如果您希望登录页使用完全不同的css和js,并且不希望包含wordpress主题的页眉和页脚,您可以通过不包含页眉和页脚来实现。

<?php
    /*
    * Template Name: Your Template Name
    */
?>
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Your Title</title>
        <meta name="description" content="Your Description">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Add your own desired css independent to wordpress theme -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <!-- Add your own desired js independent to wordpress theme -->
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>

        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>
        <!-- Add your own desired css independent to wordpress theme -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/{{JQUERY_VERSION}}/jquery.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>
这样,您就可以在不更改主题页眉和页脚文件的情况下实现任何想要的目标。

保存模板文件后,您可以使用该模板创建一个页面,并将该页面设置为您的主页。

希望这有帮助。

相关推荐

定制管理员css的好方法吗?

我已经修改了管理和登录页面上的CSS。但问题是,有时自定义CSS最后加载,这使得更改可见。CSS可以在页面加载期间更改。有没有办法在页面呈现之前编辑CSS?我无法编辑核心和插件文件,因为我希望能够在不破坏它的情况下进行更新。有什么建议吗?