web-dev-qa-db-ja.com

HTML、CSS、およびJSを使用してページを追加する方法

だから私は私が購入した私のワードプレスのテーマの機能を超えている少し余分なものを望んでいるクライアントがいます。 html、css、jsを通して最初から作成できることを知っています（アニメーションと見栄えの良いランディングページが必要です）。すべてのコードを使用して直接ページを作成するための方法またはプラグインがあるかどうか、私は思っていませんでした。私の質問をよく説明していないのであれば申し訳ありません。

pluginscsshtml
1
Lewis

テンプレートの最上部にテンプレート名を定義した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://codex.wordpress.org/Child_Themes

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

0
JediTricks007

あなたはJediTricks007が示した方法に従うことができます。ただし、ランディングページにまったく異なるCSSとJSを使用し、WordPressテーマのヘッダーとフッターを含めたくない場合は、ヘッダーとフッターを含めないことで可能です。

  1. "Child theme configurator"プラグインを使って子テーマを作成する
  2. 子テーマフォルダの中に、この "myCustomTemplate.php"ファイルを作成してください。
<?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="<?= get_stylesheet_directory_uri();?>/css/normalize.css">
        <link rel="stylesheet" href="<?= get_stylesheet_directory_uri();?>/css/main.css">
        <!-- Add your own desired js independent to wordpress theme -->
        <script src="<?= get_stylesheet_directory_uri();?>/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="<?= get_stylesheet_directory_uri();?>/js/plugins.js"></script>
        <script src="<?= get_stylesheet_directory_uri();?>/js/main.js"></script>
    </body>
</html>
  1. 子テーマフォルダにリンクするために<?= get_stylesheet_directory_uri();?>/を使用してあなたのソースにリンクしてください。

そのようにすると、テーマのヘッダーファイルとフッターファイルを変更せずに、必要なものをすべて実現できます。

テンプレートファイルを保存したら、そのテンプレートでページを作成してそのページをホームページにすることができます。

それが役立つことを願っています。

0
Hasan Sumon