kuzmich84

Создание разметки при помощи JS

Перед чтением

Перед чтением убедитесь, что вам знакомы следующие концепции:

• [DOM]
• [Functions]
• [Classes]
• [OOP]

kuzmich84

// Файл "tsconfig.json":
// - устанавливает корневой каталог проекта TypeScript;
// - выполняет настройку параметров компиляции;
// - устанавливает файлы проекта.
// Присутствие файла "tsconfig.json" в папке указывает TypeScript, что это корневая папка проекта.
// Внутри "tsconfig.json" указываются настройки компилятора TypeScript и корневые файлы проекта.
// Программа компилятора "tsc" ищет файл "tsconfig.json" сначала в папке, где она расположена, затем поднимается выше и ищет в родительских папках согласно их вложенности друг в друга.
// Команда "tsc --project C:\path\to\my\project\folder" берет файл "tsconfig.json" из папки, расположенной по данному пути.
// Файл "tsconfig.json" может быть полностью пустым, тогда компилятор скомпилирует все файлы с настройками заданными по умолчанию.
// Опции компилятора, перечисленные в командной строке перезаписывают собой опции, заданные в файле "tsconfig.json".

kuzmich84

/* Подключение скриптов и стилей */

function test_scripts(){
    wp_enqueue_style('test-bootstrapcss', get_template_directory_uri().'/assets/bootstrap/css/bootstrap.min.css');
    wp_enqueue_style('test-style', get_stylesheet_uri());

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://code.jquery.com/jquery-3.4.1.slim.min.js');
    wp_enqueue_script( 'jquery' );

kuzmich84

Пиксели — единица измерения, используемая в SVG по умолчанию.
Проценты рассчитываются относительно размеров всего SVG-изображения: горизонтальные значения относительно ширины, вертикальные — относительно высоты.

Рисуем прямоугольник:
<svg>
  <rect width="50%" height="100" fill="orange" x="25%" y="25"  rx="20" ry="50" />
</svg>
//x="25%" y="25" -  Координаты определяют положение верхнего левого угла фигуры.
// rx="20" ry="50" - Скруглением углов прямоугольника

kuzmich84

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- post -->
    <h4><?php the_title(); ?></h4>
<?php endwhile; ?>
    <!-- post navigation -->
<?php else: ?>
    <!-- no posts found -->
    <p>Постов нет...</p>
<?php endif; ?>

kuzmich84

https://freehtml5.co/

//Создаем шаблонную тему при помощи http://underscores.me/

get_template_part( 'template-parts/content', get_post_type() ); //get_post_type() - возвращает тип поста

//Подключение скриптов и стилей
wp_enqueue_style('clean-style', get_stylesheet_uri());
	wp_enqueue_style('clean-google-font1', 'http://fonts.googleapis.com/css?family=Roboto:400,300,100,500');
	wp_enqueue_style('clean-google-font2', 'http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,500');

kuzmich84

//выводит содержимое
function debug($data){
	echo '<pre>' . print_r($data, 1) . '</pre>';
} 

//автозагрузчик
function autoloader($class){
$class = str_replace("\\",'/',$class); //для того чтобы Линукс понимал слеш
$file =__DIR__."/{$class}.php";
	if(file_exists($file)){

kuzmich84

wp_enqueue_style(); - Правильно добавляет файл CSS стилей
wp_enqueue_script();  - Правильно подключает скрипт (JavaScript файл) на страницу. 
get_template_directory_uri() - Получает URL родительской темы (вернет URL родительской темы, даже если используется дочерняя). Не содержит закрывающий слэш.
 get_stylesheet_uri() - Получает ссылку (URL) на файл стилей style.css текущей темы.
<?php the_content() ?>;
<?php the_title() ?> -Выводит на экран заголовок записи. Принято использовать внутри цикла.
<?php the_excerpt() ?> - Выводит отрывок (цитату) поста, со вставкой в конец [...] (но это не ссылка на прочтение полного материала).
<?php the_permalink() ?> - Выводит ссылку (УРЛ) на пост, который в текущий момент обрабатывается в Цикле.
<?php add_theme_support() ?> - Регистрирует поддержку новых возможностей темы в WordPress (поддержка миниатюр, форматов записей и т.д.).
<?php the_post-thumbnails() ?> - Выводит html код картинки-миниатюры текущего поста. Принято использовать внутри цикла.

kuzmich84

//DOM
// Поиск элемента по тегу
var list = document.querySelector('ul');

// Поиск последнего элемента из списка
var lastProduct = document.querySelector('li:last-child');

// Поиск элемента по классу
var price = document.querySelector('.price');

kuzmich84

<form method="post" action="mailto:owen@aliensabductedme.com">
    <label for="firstname">First name:</label>
    <input type="text" id="firstname" name="firstname" /><br />
    <label for="lastname">Last name:</label>
    <input type="text" id="lastname" name="lastname" /><br />
    <label for="email">What is your email address?</label>
    <input type="text" id="email" name="email" /><br />
    <label for="whenithappened">When did it happen?</label>
    <input type="text" id="whenithappened" name="whenithappened" /><br />
    <label for="howlong">How long were you gone?</label>