worldwide open-source software

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

======Адаптивная вёрстка сайта WordPress (теория и практика)======

=====Подготовка=====
структуры папки 
Создание темы WordPress начинается с создания папки для вашей темы в директории wp-content/themes/. Назовите папку, например, notebook. Внутри этой папки создайте следующие файлы:

notebook/
├── style.css
├── index.php
├── functions.php

{{:software:development:demo:template_wordpress_1.jpg?|}}
переходим в админ панель wordpress
{{:software:development:demo:template_wordpress_2.jpg?|}}
Содержимое файла style.css:
<code css style.css>
/*
Theme Name: Notebook
Theme URI: http://example.com/notebook
Author: no name
Author URI: http://example.com
Description: My Notebook
Version: 1.0.1
*/
</code>
{{:software:development:demo:template_wordpress_3.jpg?|}}
Следующим шагом нужно добавить изображение нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы notebook с именем screenshot.png
{{:software:development:demo:template_wordpress_4.jpg?|}}
{{:software:development:demo:template_wordpress_5.jpg?|}}
Содержимое файла index.php:
<code php index.php>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><?php bloginfo('name'); ?></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_content();
            endwhile;
        else :
            echo '<p>Контент не найден</p>';
        endif;
        ?>
    </main>
    <?php wp_footer(); ?>
</body>
</html>
</code>
{{:software:development:demo:template_wordpress_7.jpg?|}}
Создаем тестовую запись в админ панели
{{:software:development:demo:template_wordpress_8.jpg?|}}