it-swarm.com.de

Wie füge ich eine Seite mit HTML, CSS und JS hinzu?

Ich habe also einen Kunden, der ein kleines Extra wünscht, das über die Fähigkeiten meines WordPress-Themas hinausgeht, das ich gekauft habe. Ich weiß durch HTML, CSS und Js, dass ich es von Grund auf neu erstellen kann (sie wollen Animationen und eine ordentlich aussehende Landing Page). Ich habe mich gefragt, ob es einen Weg oder Plugins gibt, mit denen ich direkt eine Seite mit dem gesamten Code erstellen kann. Entschuldigung, wenn ich meine Frage nicht gut erkläre!

1
Lewis

Sie können benutzerdefinierte Vorlagen in WordPress erstellen, indem Sie den Vorlagennamen oben in der Vorlage definieren. Dies ist eine grundlegende Vorlage, die Ihnen den Einstieg erleichtern soll. Sie können Ihre Vorlage unter einem Dateinamen wie tmp-mycustomname.php speichern und in Ihr Design einfügen. Sie sollten wahrscheinlich ein untergeordnetes Thema erstellen, in dem Sie diese benutzerdefinierte Vorlage speichern und zusätzliches CSS hinzufügen können, ohne es zu verlieren, wenn der Client das Thema aktualisiert.

<?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(); ?>

Sobald Ihre Vorlage erstellt wurde, gehen Sie zu Seiten> Neu hinzufügen. Dann sollten Sie so etwas sehen, wo Sie die benutzerdefinierte Vorlage in der Dropdown-Liste finden.

 page template 

Nützliche Links:

https://codex.wordpress.org/Child_Themes

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

0
JediTricks007

Sie können dem Weg folgen, den JediTricks007 zeigt. Wenn Sie jedoch ganz andere CSS- und JS-Werte für Ihre Zielseite und keine Kopf- und Fußzeilen für WordPress-Designs verwenden möchten, müssen Sie die Kopf- und Fußzeilen nicht einbeziehen.

  1. Erstellen Sie ein untergeordnetes Thema mit dem Plugin "Child Theme Configurator"
  2. Erstellen Sie im untergeordneten Themenordner diese "myCustomTemplate.php" -Datei.
<?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. Verknüpfen Sie Ihre Quellen mit <?= get_stylesheet_directory_uri();?>/, um eine Verknüpfung zum untergeordneten Themenordner herzustellen.

Auf diese Weise können Sie alles erreichen, ohne die Kopf- und Fußzeilendateien der Themen zu ändern.

Nach dem Speichern der Vorlagendatei können Sie eine Seite mit dieser Vorlage erstellen und diese Seite zu Ihrer Startseite machen.

Hoffentlich hilft das.

0
Hasan Sumon