Tehnografi.com - Технологические новости, обзоры и советы
blogs2

Полное руководство по разработке темы WordPress

Следующая статья поможет вам: Полное руководство по разработке темы WordPress

Введение

Вы тот, кто хочет изучить разработку темы WordPress, чтобы получить навыки в разработке WordPress? Хотя WordPress предлагает тысячи многофункциональных премиальных тем. Но иногда вы можете искать более индивидуальные темы, более соответствующие потребностям вашего проекта, и с той же целью люди хотят изучать разработку тем WordPress. Более того, изучение разработки тем WordPress открывает для вас совершенно новый мир, поскольку позволяет создавать собственные темы для создания более привлекательных впечатлений для себя, своих клиентов, их клиентов и даже вносить свой вклад в большое сообщество разработчиков открытого исходного кода.

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

Прежде чем перейти к разработке темы WordPress, давайте начнем с понимания…

Что такое тема WordPress? Как они работают? Из чего Они сделали?

Тема — это то, как ваш сайт выглядит в интерфейсе, и изменение темы означает изменение дизайна макета сайта так, как вы хотите. Изучение разработки темы WordPress позволяет вам удалить ненужные элементы дизайна и добавить функциональность, которая не используется по умолчанию, чтобы сделать ее более достойной. Однако, прежде чем перейти к разработке темы WordPress, вы должны хорошо понимать, из чего они сделаны и как они функционируют.

Из чего сделаны темы WordPress?

По сути, темы WordPress представляют собой наборы различных файлов, которые работают вместе для разработки и создания макета сайта для внешнего интерфейса, который вы можете видеть, и как он работает.

Для большинства необходимых файлов тема WordPress зависит от

  1. index.php — основной файл шаблона
  2. style.css — основной файл стилей

Index.php — это основной файл шаблона темы, который определяет, как различные элементы будут расположены на странице, а затем для их форматирования используется файл styles.css. Если в теме нет дополнительных шаблонов — WordPress отображает все страницы в соответствии с файлом index.php.

Вы можете найти некоторые дополнительные файлы в папке темы, в том числе (больше зависит от дизайна сайта):

  • Классические темы создаются с помощью файлов PHP, в том числе файлы шаблонов
  • Блочные темы создаются из блоков и HTML-файлов.
  • Файлы локализации
  • CSS-файлы
  • JavaScript
  • Графика
  • Текстовые файлы — обычно информация о лицензии, инструкции readme.txt и файл журнала изменений

Все вышеперечисленные файлы определяют и способствуют созданию общего дизайна веб-сайта.

Как работают темы WordPress?

Чтобы установить тему WordPress, вам необходимо поместить все вышеперечисленные файлы, в основном файлы index.php и style.css, в папку, расположенную в каталоге https://yourdomain.com/wp-content/themes/. После загрузки вам необходимо активировать тему в разделе «Внешний вид» в разделе «Темы» на панели управления WordPress. И для эффективного выполнения всего этого вам потребуется базовое понимание HTML, CSS, PHP и немного знаний о том, как работает панель инструментов WordPress.

Как начать разработку темы WordPress?

Вы можете начать разработку темы с любого из следующих подходов:

Создайте тему с нуля

Хорошо начинать разработку темы WordPress с нуля с четким планом действий, четко определенными реалистичными сроками, а надлежащее ноу-хау необходимо для успеха проекта. Но для того же вы должны иметь некоторые знания в области кодирования HTML, CSS, PHP и базовое понимание того, как все они работают вместе.

Использование оригинальных стартовых тем

Еще один простой способ приступить к разработке темы WordPress — выбрать оригинальную стартовую тему, в которой вы получите все шаблоны и файлы CSS, уже готовые к использованию. WordPress предлагает несколько премиальных и бесплатных начальных тем, которые вы можете использовать в качестве основы, и они хороши для дальнейшего улучшения дизайна в соответствии с требованиями вашего проекта.

Настройка существующих тем WordPress

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

Поскольку вы собираетесь разрабатывать тему веб-сайта, в следующем разделе мы обсудим лучшие редакторы кода, которые облегчат вам создание файлов HTML, CSS, PHP, javascript.

Лучший редактор кода

Вам понадобятся правильные инструменты для разработки тем WordPress, чтобы сделать процесс разработки вашей темы более быстрым и эффективным, особенно если вы впервые окунулись в редактирование кода. Эти редакторы кода позволяют создавать файлы PHP, HTML, JavaScript и CSS с более продвинутыми функциями и улучшенной средой для написания и редактирования темы WordPress.

Атом

Atom — один из самых популярных бесплатных редакторов кода с открытым исходным кодом, разработанный командой GitHub. Сегодня его интеграция с Git и GitHub является сильной стороной его привлекательности, упрощающей совместную работу. Пользовательский интерфейс Atom прост и понятен, и вы можете настроить его по своему усмотрению. Atom — отличный инструмент для межплатформенной совместной работы, доступный на WindowsMac и Linux.

Блокнот++

Блокнот++ — еще один легкий, но многофункциональный бесплатный редактор кода, который облегчает редактирование кода выхода, предлагает автоматическую проверку орфографии, подсветку синтаксиса, поддержку FTP через плагин, запись и воспроизведение макросов. Работает без нареканий WindowsLinux и UNIX, и если вы хотите использовать его на Mac, вам необходимо заручиться помощью стороннего инструмента.

Возвышенный текст

Возвышенный текст — еще один самый сложный, быстрый и легкий редактор кода, известный тем, что предлагает пользователям отличный кроссплатформенный опыт, независимо от того, используют ли они его на Mac, Windowsили линукс. Он предлагает отличные функции для поддержки эффективного редактирования кода, включая доступ к великолепной экосистеме пакетов и API, поддержку раздельного редактирования, полную настраиваемость, поддержку FTP и многое другое. нужно заплатить 80 долларов за расширенную версию.

Код Visual Studio

Код Visual Studio — отличный кроссплатформенный легкий редактор кода от Microsoft, который можно часто использовать на любой из их платформ. Windows, Linux или Mac. Он предлагает полную настраиваемость, интеллектуальное автозаполнение, поддержку FTP через расширение и многие другие дополнительные функции бесплатно.

Кронштейны

Кронштейны — один из наиболее подходящих редакторов кода, разработанный Adobe для людей, плохо знакомых с кодированием, с приятным пользовательским интерфейсом, работающий в любой системе и имеющий широкие возможности настройки. Brackets предлагает некоторые интересные функции, такие как предварительный просмотр в реальном времени, функция быстрого редактирования, поддержка FTP и Git, которые делают его более привлекательным.

Выше мы обсудили несколько лучших редакторов кода, надеюсь, любой из них будет близко соответствовать вашим потребностям. Теперь давайте рассмотрим несколько хороших инструментов перетаскивания, которые могут помочь вам в разработке темы WordPress.

Обязательные инструменты разработки темы WordPress с помощью перетаскивания

1. Ультиматум

Ultimatum — это один из премиальных инструментов разработки тем WordPress с функцией перетаскивания для создания индивидуального дизайна для вашей темы WordPress. С помощью конструктора макетов с перетаскиванием вы можете настроить свою тему от верхних до нижних колонтитулов. Он предлагает более 600 шрифтов Google, чтобы вы могли разработать свой макет и текст так, как вы хотите. И позволит вам добавить больше функциональности на ваш сайт с помощью пользовательских шорткодов.

2. Прогресс

Headway — это конструктор компоновки WordPress с возможностью перетаскивания, известный своей гибкостью, позволяющей создавать что угодно, от стандартного веб-сайта для блогов до сайта электронной коммерции с уникальным дизайном. Сетка Headway позволяет размещать элементы в определенных областях вашей страницы для создания полностью индивидуального макета.

3. Генератор тем

Генератор тем — один из самых продвинутых инструментов для разработки тем WordPress с функциями визуального редактора для создания удивительно индивидуального дизайна веб-сайта. Он предоставляет возможность создать собственную тему или настроить готовые шаблоны, а также предоставляет предварительно созданные блоки, включая изображения, видео, карты и значки социальных сетей для создания настраиваемых тем.

4. Генератор тем WordPress

С помощью генератора тем WordPress вы можете создать и персонализировать свою собственную тему с различными вариантами дизайна на выбор. Он предоставляет расширенные функции настройки для настройки панелей навигации, сообщений и боковых панелей сайта, включая цветовые палитры и шрифты для эффективного дизайна веб-сайта.

5. Шаблон Тостер

TemplateToaster — еще один отличный инструмент с интерфейсом перетаскивания, который поможет вам разрабатывать простые, но мощные шаблоны без сложного кодирования. Его простой интерфейс позволяет редактировать разделы контента, добавлять изображения и создавать таблицы. Он также предлагает настольный инструмент, который позволяет создавать веб-сайты на локальном компьютере без подключения к Интернету.

Эти лучшие генераторы тем WordPress помогут вам создать собственную тему для вашего сайта. Эти инструменты предлагают визуальные редакторы, различные шрифты и несколько дополнительных параметров настройки, которые помогут вам создавать уникальные темы WordPress, которые помогут вашему бизнесу выделиться среди конкурентов.

Далее мы собираемся увидеть Разработка темы WordPress с помощью Bootstrap.

Разработка темы WordPress с помощью Bootstrap

Bootstrap — это фреймворк с открытым исходным кодом, который можно использовать для создания адаптивных тем WordPress с помощью шаблонов дизайна на основе CSS и JavaScript.

Вот шаги для создания начальной загрузки темы WordPress.

Шаг 1: Распакуйте Bootstrap

  1. Сначала установите WordPress на свой домен.
  2. Загрузите и разархивируйте Bootstrap.
  3. Затем подключите его с помощью FTP-клиента, например FileZilla.
  4. Перейдите к wp-content > themes.
  5. Создайте новую папку в папке «Темы» с именем «BootSTheme». Загрузите все содержимое разархивированного Bootstrap в эту папку.
  6. Обычно установка WordPress содержит следующие файлы:
    • нижний колонтитул.php
    • заголовок.php
    • index.php
    • стиль.css

Итак, сделайте четыре пустых файла для всех типов файлов в папке BootSTheme.

Шаг 2: Настройте Bootstrap

Чтобы настроить начальную загрузку, перейдите в папку BootSTheme, откройте файл style.css и вставьте следующий код.

  1. /*
  2. Название темы: MyTheme
  3. URI темы: https://cloudways.com
  4. Описание: Mytheme, построенная на бутстрапе
  5. Версия: 1.1
  6. Автор: Ахсан Парвез
  7. URI автора: https://cloudways.com
  8. */

Эти комментарии используются для предоставления описаний и подробностей о теме. Здесь вы изменяете эти комментарии, чтобы отразить более точное сообщение в вашей теме.

Шаг 3: Копирование кода

Чтобы запустить процесс разработки, вам нужно скопировать код из файла bootstrap.min.css и вставить в файл style.css. На этом этапе файл style.css должен выглядеть так, как показано ниже.

Шаг 4: Настройте HTML-шаблон

Здесь вы можете использовать темы HTML. WordPress имеет встроенные функции, такие как get_header() и get_footer(), которые по умолчанию вызывают файлы header.php и footer.php соответственно. Вы можете начать с вырезания HTML-кода сверху до первого div-контейнера и вставки его в файл header.php. Файл должен выглядеть так:

Файл footer.php будет содержать остальную часть кода:

Чтобы загрузить верхний и нижний колонтитулы, используйте встроенную функцию WordPress для вызова этих элементов. Для этого вставьте следующий код в index.php:

  1. get_header(); ?>
  2. get_footer(); ?>

Теперь элементы заголовка и нижнего колонтитула будут загружаться на наш сайт, но мы получим базовую страницу без какого-либо стиля (как показано ниже).

Шаг 5: Настройка верхнего и нижнего колонтитула

Теперь в файле header.php импортируйте таблицу стилей Bootstrap с помощью функции WordPress echo get_stylesheet_uri() (подробнее о функции см. Кодекс WordPress). Это поможет вам импортировать style.css на веб-сайт, и теперь вы сможете увидеть верхнюю строку меню.

Теперь для настройки стиля в заголовке вы можете добавить style.css, добавив следующий код в начало файла header.php. Но пока функции JavaScript на вашей странице не заработают, никаких выпадающих меню мы не увидим.

  1. “>

Чтобы включить это, вам нужно импортировать файлы js, напрямую импортируя файл по URL-адресу в файле footer.php. Вставьте его код перед закрывающим тегом body.

WordPress известен своими настройками и плагинами. Теперь поместите хуки плагинов и вставьте и в файлах header.php и footer.php. Кроме того, для установки динамических заголовков веб-сайта мы будем использовать wp_title(); в файле header.php между тегами .</p> <ol> <li style="font-weight: 400;" aria-level="1"><заголовок><?php <b>wp_title</b>(‘ | ‘, истина, ‘правильно’); ></название></li> </ol> <div class='code-block code-block-20' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-20-2' data-info='WyIyMC0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTM="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_1" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_1')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTI="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_2" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_2')</script> </div> </div></center></p></div> </div> </div> <p>Приведенный выше код вызовет заголовок сообщения, разделенный символом «|». чем название сайта. Здесь «право» определяет расположение заголовка сообщения справа от разделителя.</p> <h3 id="section5492"><span class="ez-toc-section" id="%D0%A8%D0%B0%D0%B3_6_%D0%9E%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8%D0%B7%D0%B1%D1%80%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B9"></span>Шаг 6: Отображение избранных сообщений<span class="ez-toc-section-end"></span></h3> <p>Затем вы должны динамически вызывать сообщения на главной странице (как показано ) и отображать их вверху, подобно избранным сообщениям, которые вы видите на многих сайтах WordPress.</p> <p>Напишите следующий код в ваш index.php:</p> </p> <div class='code-block code-block-21' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-21-2' data-info='WyIyMS0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTE="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_2" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_2')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTI="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_3" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_3')</script> </div> </div></center></p></div> </div> </div> <p>Как и в приведенном выше коде, используется цикл while и устанавливается количество сообщений равным одному с помощью post_per_page. Эта строка будет отображать только последнее сообщение в блоге в верхней части страницы, и после закрытия цикла запрос_сообщений сбрасывается.</p> <p>Класс jumbotron определен в файле bootstrap.min.css. Вы можете использовать его для стилизации избранных сообщений с помощью тегов </p> <h2> и the_permalink(); функция. Гиперссылка создается в заголовке сообщения, а the_permalink(); используется для ссылок на URL всего поста. Чтобы показать отрывок из поста, вы можете использовать другую встроенную функцию WordPress, the_excerpt();.</p> </p> <h3 id="section5493">Шаг 7: Список ваших категорий</h3> <p>Вы можете перечислить категории в левой части главной страницы и создать несколько экземпляров div, стилизованных под классы Bootstrap и функцию WordPress wp_list_categories();.</p> <div class='code-block code-block-22' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-22-2' data-info='WyIyMi0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTE="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_3" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_3')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTM="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_1" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_1')</script> </div> </div></center></p></div> </div> </div> <p>Вставьте данный код в файл index.php:</p> <ol> <li style="font-weight: 400;" aria-level="1"> <div class="panel panel-default panel-body"></li> <li style="font-weight: 400;" aria-level="1"><дел></li> <li style="font-weight: 400;" aria-level="1"><дел></li> <li style="font-weight: 400;" aria-level="1"><ул></li> <li style="font-weight: 400;" aria-level="1"><?php <b>wp_list_categories</b>(‘orderby=name&title_li=’); ?></li> <li style="font-weight: 400;" aria-level="1"></ul> </li> <li style="font-weight: 400;" aria-level="1"></div> </li> <li style="font-weight: 400;" aria-level="1"></div> </li> <li style="font-weight: 400;" aria-level="1"></div> </li> </ol> <p>Здесь вы можете перечислить категории по имени с приятным эффектом наведения.</p> <h3 id="section5494">Шаг 8. Отображение последних сообщений и авторов</h3> <p>Наконец, вы можете показать последние сообщения в блоге на главной странице. Вы должны начать другой тег div и под этим div и использовать аналогичную технику цикла while, которую вы использовали в избранном посте, но мы не собираемся ограничивать ее с помощью query_posts();.</p> <ol> <li><дел></li> <li><?php <b>пока</b>(<b>have_posts</b>()) : <b>the_post</b>(); ?></li> <li> <h3><a href="https://www.janbaskdigitaldesign.com/blogs/wordpress-theme-development/<?php the_permalink(); ?>“><?php <b>the_title</b>(); ?></а></h3> </li> <li> <div class='code-block code-block-23' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-23-2' data-info='WyIyMy0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTM="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_1" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_1')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTI="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_2" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_2')</script> </div> </div></center></p></div> </div> </div> <p><?php <b>the_excerpt</b>(); ?></p> </li> <li> <p> опубликовано пользователем <?php <b>Автор</b>(); ?></li> <li><?php в конце; <b>wp_reset_query</b>(); ?></li> <li></div> </li> </ol> <p>Функции WordPress the_author(); используется для получения имени пользователя автора сообщения. вы можете использовать его для динамического отображения имени автора сообщения.</p> </p> <div class='code-block code-block-24' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-24-2' data-info='WyIyNC0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTE="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_2" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_2')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTM="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_3" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_3')</script> </div> </div></center></p></div> </div> </div> <p><i>Итак, надеемся, что эти шаги по начальной загрузке темы WordPress помогут вам эффективно в процессе разработки темы WordPress.</i></p> <h2>Плюсы и минусы разработки пользовательских тем WordPress</h2> <p><b>Плюсы:</b></p> <ul> <li style="font-weight: 400;" aria-level="1">Разработка пользовательской темы WordPress может быть немного сложной, особенно если у вас нет предыдущих знаний или опыта кодирования, поскольку для этого требуются хорошие навыки кодирования HTML, CSS, PHP. Да, это может быть возможностью для одного расширить свои навыки и узнать что-то новое. </li> <li style="font-weight: 400;" aria-level="1">Еще одним важным преимуществом является то, что он дает вам возможность создать свой веб-сайт именно так, как вы этого хотите. С помощью Custom WordPress theme Development вы можете добавить все расширенные функции и функции, которые вам понадобятся для достижения успеха в вашей конкретной нише.</li> <li style="font-weight: 400;" aria-level="1">Поскольку миллионы веб-сайтов используют предварительно разработанные или существующие общие темы WordPress, пользовательские темы помогут вам выделиться из этого раздела и обеспечат вам конкурентное преимущество над ними.</li> </ul> <p><b>Минусы:</b></p> <ul> <li style="font-weight: 400;" aria-level="1">Основным недостатком разработки пользовательской темы является то, что вы будете нести ответственность за исправление каждой ошибки, с которой сталкивается тема. Если код вашей темы тяжелее или имеет более высокий уровень сложности, удаление всех ошибок не будет легкой задачей, что, несомненно, может задержать запуск проекта и замедлить его рост.</li> <li style="font-weight: 400;" aria-level="1">Любые будущие обновления WordPress могут привести к серьезным проблемам с совместимостью, и вы должны будете исправить эти проблемы, обновив изменения в соответствии с новым обновлением WordPress. Кроме того, вам нужен большой опыт работы с ошибками, редактирования кода. </li> </ul> <div class='code-block code-block-25' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-25-2' data-info='WyIyNS0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTM="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_3" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_3')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTI="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_1" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_1')</script> </div> </div></center></p></div> </div> </div> <p><i>Да, это правда, полностью индивидуальный дизайн может стать огромным стимулом для вашего веб-сайта, но работа со всеми перечисленными сценариями требует больших усилий и навыков кодирования.</i></p> <h2><span class="ez-toc-section" id="%D0%A7%D0%B0%D1%81%D1%82%D0%BE_%D0%B7%D0%B0%D0%B4%D0%B0%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D1%8B_%D0%BE_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B5_%D1%82%D0%B5%D0%BC%D1%8B_WordPress"></span>Часто задаваемые вопросы о разработке темы WordPress<span class="ez-toc-section-end"></span></h2> <p><b>Q1. Что все входит в услуги по разработке тем WordPress?</b></p> <p><strong>Ответ</strong> Услуги по разработке тем WordPress охватывают:</p> <ul> <li>Разработка темы WordPress</li> <li>Настройка темы WordPress</li> <li>Оптимизация скорости WordPress</li> <li>Бесплатная установка и настройка для пользовательского дизайна WordPress</li> </ul> <div class='code-block code-block-26' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-26-2' data-info='WyIyNi0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTE="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_1" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_1')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTI="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_2" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_2')</script> </div> </div></center></p></div> </div> </div> <p><b>Q2. Как научиться разрабатывать темы WordPress?</b></p> <p><strong>Ответ</strong> Вы можете изучить разработку тем WordPress с помощью различных бесплатных онлайн-видеоуроков или присоединиться к обучению от любого надежного провайдера ИТ-обучения, такого как JanBask Digital Design, чтобы получить углубленное изучение разработки веб-сайтов WordPress, и если вы готовы передать услуги разработки тем WordPress на аутсорсинг для вашего веб-сайта, не стесняйтесь обращаться к команде JanBask.</p> <p><b>Q3. Нужно ли строить новый </b><b>Веб-сайт WordPress</b><b> тема с нуля?</b></p> <div class='code-block code-block-27' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-27-2' data-info='WyIyNy0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTE="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_2" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_2')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTM="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_3" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_3')</script> </div> </div></center></p></div> </div> </div> <p><strong>Ответ </strong>Не обязательно. Начать с нуля — это один из вариантов разработки новой темы WP, и для этого нужно приложить больше усилий. WordPress предлагает бесконечный набор готовых тем, вы можете выбрать похожую подходящую и настроить ее в соответствии с потребностями вашего проекта.</p> <h2><span class="ez-toc-section" id="%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%BC%D1%8B%D1%81%D0%BB%D0%B8_%D0%BE_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B5_%D1%82%D0%B5%D0%BC%D1%8B_WordPress"></span>Заключительные мысли о разработке темы WordPress <span class="ez-toc-section-end"></span></h2> <p>Внешний вид вашего веб-сайта может оказать огромное влияние на успех вашего бизнеса, поскольку хорошие темы улучшают взаимодействие с вашим веб-сайтом. Если тема сайта привлекательна и достаточно своеобразна, чтобы привлечь внимание пользователей, пользователи с большей вероятностью будут взаимодействовать с ней, ощутят ее преимущества и предпочтут поделиться ею со своим близким контактом. </p> <p>Это правда, что настройка и поддержка тем WordPress — это сложная задача, которая должна быть тщательно спланирована и выполнена с достаточными усилиями и знанием HTML, CSS. PHP-кодирование. Подумайте о том, чтобы обратиться за созданием профессионального сайта WordPress в опытное агентство. Выбор профессионального дизайна и разработки WordPress на аутсорсинге будет для вас правильным выбором.</p> <div class='code-block code-block-28' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-28-2' data-info='WyIyOC0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTM="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_3" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_3')</script> </div> </div></center></p></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTI="> <p><center><div class="ads-box"> <div class="ads-sticky"> <div data-ad="tehnografi.com_fluid_lb+sq_1" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_1')</script> </div> </div></center></p></div> </div> </div> <p><i>Нашли этот пост полезным? Мы будем рады услышать о вашем опыте разработки темы WordPress. Не стесняйтесь комментировать ниже.</i></p> <p>Хотите создать динамический и многофункциональный веб-сайт WordPress?</p> <ul class="te-innmd"> <li>Хорошо оптимизированные целевые страницы</li> <li>Получите первоклассные функции</li> <li>Интуитивно понятный макет сайта</li> </ul> <div id="ez-toc-container" class="ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction"> <div class="ez-toc-title-container"> <p class="ez-toc-title " >Table of Contents</p> <span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div> <nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5" title="Введение">Введение</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D1%82%D0%B5%D0%BC%D0%B0_WordPress_%D0%9A%D0%B0%D0%BA_%D0%BE%D0%BD%D0%B8_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%8E%D1%82_%D0%98%D0%B7_%D1%87%D0%B5%D0%B3%D0%BE_%D0%9E%D0%BD%D0%B8_%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D0%BB%D0%B8" title="Что такое тема WordPress? Как они работают? Из чего Они сделали?">Что такое тема WordPress? Как они работают? Из чего Они сделали?</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="#%D0%98%D0%B7_%D1%87%D0%B5%D0%B3%D0%BE_%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D0%BD%D1%8B_%D1%82%D0%B5%D0%BC%D1%8B_WordPress" title="Из чего сделаны темы WordPress?">Из чего сделаны темы WordPress?</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-4" href="#%D0%9A%D0%B0%D0%BA_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%8E%D1%82_%D1%82%D0%B5%D0%BC%D1%8B_WordPress" title="Как работают темы WordPress? ">Как работают темы WordPress? </a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-5" href="#%D0%9A%D0%B0%D0%BA_%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D1%83_%D1%82%D0%B5%D0%BC%D1%8B_WordPress" title="Как начать разработку темы WordPress?">Как начать разработку темы WordPress?</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9%D1%82%D0%B5_%D1%82%D0%B5%D0%BC%D1%83_%D1%81_%D0%BD%D1%83%D0%BB%D1%8F" title="Создайте тему с нуля">Создайте тему с нуля</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-7" href="#%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D1%80%D0%B8%D0%B3%D0%B8%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D1%85_%D1%81%D1%82%D0%B0%D1%80%D1%82%D0%BE%D0%B2%D1%8B%D1%85_%D1%82%D0%B5%D0%BC" title="Использование оригинальных стартовых тем">Использование оригинальных стартовых тем</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-8" href="#%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0_%D1%81%D1%83%D1%89%D0%B5%D1%81%D1%82%D0%B2%D1%83%D1%8E%D1%89%D0%B8%D1%85_%D1%82%D0%B5%D0%BC_WordPress" title="Настройка существующих тем WordPress">Настройка существующих тем WordPress</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-9" href="#%D0%9B%D1%83%D1%87%D1%88%D0%B8%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80_%D0%BA%D0%BE%D0%B4%D0%B0" title="Лучший редактор кода">Лучший редактор кода</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-10" href="#%D0%90%D1%82%D0%BE%D0%BC" title="Атом">Атом</a></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-11" href="#%D0%91%D0%BB%D0%BE%D0%BA%D0%BD%D0%BE%D1%82" title="Блокнот++">Блокнот++</a></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-12" href="#%D0%92%D0%BE%D0%B7%D0%B2%D1%8B%D1%88%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9_%D1%82%D0%B5%D0%BA%D1%81%D1%82" title="Возвышенный текст">Возвышенный текст</a></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-13" href="#%D0%9A%D0%BE%D0%B4_Visual_Studio" title="Код Visual Studio">Код Visual Studio</a></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-14" href="#%D0%9A%D1%80%D0%BE%D0%BD%D1%88%D1%82%D0%B5%D0%B9%D0%BD%D1%8B" title="Кронштейны">Кронштейны</a></li></ul></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-15" href="#%D0%9E%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8_%D1%82%D0%B5%D0%BC%D1%8B_WordPress_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_%D0%BF%D0%B5%D1%80%D0%B5%D1%82%D0%B0%D1%81%D0%BA%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F" title="Обязательные инструменты разработки темы WordPress с помощью перетаскивания">Обязательные инструменты разработки темы WordPress с помощью перетаскивания</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-16" href="#1_%D0%A3%D0%BB%D1%8C%D1%82%D0%B8%D0%BC%D0%B0%D1%82%D1%83%D0%BC" title="1. Ультиматум">1. Ультиматум</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-17" href="#2_%D0%9F%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%81" title="2. Прогресс">2. Прогресс</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-18" href="#3_%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80_%D1%82%D0%B5%D0%BC" title="3. Генератор тем">3. Генератор тем</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-19" href="#4_%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80_%D1%82%D0%B5%D0%BC_WordPress" title="4. Генератор тем WordPress">4. Генератор тем WordPress</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-20" href="#5_%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_%D0%A2%D0%BE%D1%81%D1%82%D0%B5%D1%80" title="5. Шаблон Тостер">5. Шаблон Тостер</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-21" href="#%D0%A0%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0_%D1%82%D0%B5%D0%BC%D1%8B_WordPress_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_Bootstrap" title="Разработка темы WordPress с помощью Bootstrap">Разработка темы WordPress с помощью Bootstrap</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-22" href="#%D0%A8%D0%B0%D0%B3_1_%D0%A0%D0%B0%D1%81%D0%BF%D0%B0%D0%BA%D1%83%D0%B9%D1%82%D0%B5_Bootstrap" title="Шаг 1: Распакуйте Bootstrap">Шаг 1: Распакуйте Bootstrap</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-23" href="#%D0%A8%D0%B0%D0%B3_2_%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%82%D0%B5_Bootstrap" title="Шаг 2: Настройте Bootstrap">Шаг 2: Настройте Bootstrap</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-24" href="#%D0%A8%D0%B0%D0%B3_3_%D0%9A%D0%BE%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%B4%D0%B0" title="Шаг 3: Копирование кода">Шаг 3: Копирование кода</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-25" href="#%D0%A8%D0%B0%D0%B3_4_%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%82%D0%B5_HTML-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD" title="Шаг 4: Настройте HTML-шаблон">Шаг 4: Настройте HTML-шаблон</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-26" href="#%D0%A8%D0%B0%D0%B3_5_%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0_%D0%B2%D0%B5%D1%80%D1%85%D0%BD%D0%B5%D0%B3%D0%BE_%D0%B8_%D0%BD%D0%B8%D0%B6%D0%BD%D0%B5%D0%B3%D0%BE_%D0%BA%D0%BE%D0%BB%D0%BE%D0%BD%D1%82%D0%B8%D1%82%D1%83%D0%BB%D0%B0" title="Шаг 5: Настройка верхнего и нижнего колонтитула">Шаг 5: Настройка верхнего и нижнего колонтитула</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-27" href="#%D0%A8%D0%B0%D0%B3_6_%D0%9E%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8%D0%B7%D0%B1%D1%80%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B9" title="Шаг 6: Отображение избранных сообщений">Шаг 6: Отображение избранных сообщений</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-28" href="#%D0%B8_the_permalink_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F_%D0%93%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%B5%D1%82%D1%81%D1%8F_%D0%B2_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B5_%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B0_the_permalink_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%B4%D0%BB%D1%8F_%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA_%D0%BD%D0%B0_URL_%D0%B2%D1%81%D0%B5%D0%B3%D0%BE_%D0%BF%D0%BE%D1%81%D1%82%D0%B0_%D0%A7%D1%82%D0%BE%D0%B1%D1%8B_%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C_%D0%BE%D1%82%D1%80%D1%8B%D0%B2%D0%BE%D0%BA_%D0%B8%D0%B7_%D0%BF%D0%BE%D1%81%D1%82%D0%B0_%D0%B2%D1%8B_%D0%BC%D0%BE%D0%B6%D0%B5%D1%82%D0%B5_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_%D0%B4%D1%80%D1%83%D0%B3%D1%83%D1%8E_%D0%B2%D1%81%D1%82%D1%80%D0%BE%D0%B5%D0%BD%D0%BD%D1%83%D1%8E_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8E_WordPress_the_excerpt_%D0%A8%D0%B0%D0%B3_7_%D0%A1%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D0%B2%D0%B0%D1%88%D0%B8%D1%85_%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D0%B9_%D0%92%D1%8B_%D0%BC%D0%BE%D0%B6%D0%B5%D1%82%D0%B5_%D0%BF%D0%B5%D1%80%D0%B5%D1%87%D0%B8%D1%81%D0%BB%D0%B8%D1%82%D1%8C_%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D0%B8_%D0%B2_%D0%BB%D0%B5%D0%B2%D0%BE%D0%B9_%D1%87%D0%B0%D1%81%D1%82%D0%B8_%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B9_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B_%D0%B8_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C_%D0%BD%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D1%8D%D0%BA%D0%B7%D0%B5%D0%BC%D0%BF%D0%BB%D1%8F%D1%80%D0%BE%D0%B2_div_%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D0%BF%D0%BE%D0%B4_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B_Bootstrap_%D0%B8_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8E_WordPress_wp_list_categories_ai-rotate_position_relative_ai-rotate-hidden_visibility_hidden_ai-rotate-hidden-2_position_absolute_top_0_left_0_width_100_height_100_ai-list-data_ai-ip-data_ai-filter-check_ai-fallback_ai-list-block_ai-list-block-ip_ai-list-block-filter_visibility_hidden_position_absolute_width_50_height_1px_top_-1000px_z-index_-9999_margin_0pximportant_ai-list-data_ai-ip-data_ai-filter-check_ai-fallback_min-width_1px_windowdemandSupply_demandSupplysurge_demandSupplysurgedisplayAdtehnograficom_fluid_lbsq_3_windowdemandSupply_demandSupplysurge_demandSupplysurgedisplayAdtehnograficom_fluid_lbsq_1_%D0%92%D1%81%D1%82%D0%B0%D0%B2%D1%8C%D1%82%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%B4_%D0%B2_%D1%84%D0%B0%D0%B9%D0%BB_indexphp_%D0%97%D0%B4%D0%B5%D1%81%D1%8C_%D0%B2%D1%8B_%D0%BC%D0%BE%D0%B6%D0%B5%D1%82%D0%B5_%D0%BF%D0%B5%D1%80%D0%B5%D1%87%D0%B8%D1%81%D0%BB%D0%B8%D1%82%D1%8C_%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D0%B8_%D0%BF%D0%BE_%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8_%D1%81_%D0%BF%D1%80%D0%B8%D1%8F%D1%82%D0%BD%D1%8B%D0%BC_%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D0%BE%D0%BC_%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F_%D0%A8%D0%B0%D0%B3_8_%D0%9E%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BE%D1%81%D0%BB%D0%B5%D0%B4%D0%BD%D0%B8%D1%85_%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B9_%D0%B8_%D0%B0%D0%B2%D1%82%D0%BE%D1%80%D0%BE%D0%B2_%D0%9D%D0%B0%D0%BA%D0%BE%D0%BD%D0%B5%D1%86_%D0%B2%D1%8B_%D0%BC%D0%BE%D0%B6%D0%B5%D1%82%D0%B5_%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C_%D0%BF%D0%BE%D1%81%D0%BB%D0%B5%D0%B4%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B2_%D0%B1%D0%BB%D0%BE%D0%B3%D0%B5_%D0%BD%D0%B0_%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B9_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B5_%D0%92%D1%8B_%D0%B4%D0%BE%D0%BB%D0%B6%D0%BD%D1%8B_%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C_%D0%B4%D1%80%D1%83%D0%B3%D0%BE%D0%B9_%D1%82%D0%B5%D0%B3_div_%D0%B8_%D0%BF%D0%BE%D0%B4_%D1%8D%D1%82%D0%B8%D0%BC_div_%D0%B8_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_%D0%B0%D0%BD%D0%B0%D0%BB%D0%BE%D0%B3%D0%B8%D1%87%D0%BD%D1%83%D1%8E_%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA%D1%83_%D1%86%D0%B8%D0%BA%D0%BB%D0%B0_while_%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%83%D1%8E_%D0%B2%D1%8B_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BB%D0%B8_%D0%B2_%D0%B8%D0%B7%D0%B1%D1%80%D0%B0%D0%BD%D0%BD%D0%BE%D0%BC_%D0%BF%D0%BE%D1%81%D1%82%D0%B5_%D0%BD%D0%BE_%D0%BC%D1%8B_%D0%BD%D0%B5_%D1%81%D0%BE%D0%B1%D0%B8%D1%80%D0%B0%D0%B5%D0%BC%D1%81%D1%8F_%D0%BE%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B8%D0%B2%D0%B0%D1%82%D1%8C_%D0%B5%D0%B5_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_query_posts" title=" и the_permalink(); функция. Гиперссылка создается в заголовке сообщения, а the_permalink(); используется для ссылок на URL всего поста. Чтобы показать отрывок из поста, вы можете использовать другую встроенную функцию WordPress, the_excerpt();. Шаг 7: Список ваших категорий Вы можете перечислить категории в левой части главной страницы и создать несколько экземпляров div, стилизованных под классы Bootstrap и функцию WordPress wp_list_categories();. .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_3') window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_1') Вставьте данный код в файл index.php: Здесь вы можете перечислить категории по имени с приятным эффектом наведения. Шаг 8. Отображение последних сообщений и авторов Наконец, вы можете показать последние сообщения в блоге на главной странице. Вы должны начать другой тег div и под этим div и использовать аналогичную технику цикла while, которую вы использовали в избранном посте, но мы не собираемся ограничивать ее с помощью query_posts();. "> и the_permalink(); функция. Гиперссылка создается в заголовке сообщения, а the_permalink(); используется для ссылок на URL всего поста. Чтобы показать отрывок из поста, вы можете использовать другую встроенную функцию WordPress, the_excerpt();. Шаг 7: Список ваших категорий Вы можете перечислить категории в левой части главной страницы и создать несколько экземпляров div, стилизованных под классы Bootstrap и функцию WordPress wp_list_categories();. .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_3') window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_1') Вставьте данный код в файл index.php: Здесь вы можете перечислить категории по имени с приятным эффектом наведения. Шаг 8. Отображение последних сообщений и авторов Наконец, вы можете показать последние сообщения в блоге на главной странице. Вы должны начать другой тег div и под этим div и использовать аналогичную технику цикла while, которую вы использовали в избранном посте, но мы не собираемся ограничивать ее с помощью query_posts();. </a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-29" href="#%D0%A7%D0%B0%D1%81%D1%82%D0%BE_%D0%B7%D0%B0%D0%B4%D0%B0%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D1%8B_%D0%BE_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B5_%D1%82%D0%B5%D0%BC%D1%8B_WordPress" title="Часто задаваемые вопросы о разработке темы WordPress">Часто задаваемые вопросы о разработке темы WordPress</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-30" href="#%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%BC%D1%8B%D1%81%D0%BB%D0%B8_%D0%BE_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B5_%D1%82%D0%B5%D0%BC%D1%8B_WordPress" title="Заключительные мысли о разработке темы WordPress ">Заключительные мысли о разработке темы WordPress </a></li></ul></nav></div> <!-- CONTENT END 2 --> </div><div class="otw-two otw-columns otw-pull-twentytwo otw-primary-sidebar"><div class="otw-sticky-sidebar"><div class="otw-sidebar" id="otw-sidebar-1"><div id="gridlove_adsense_widget-3" class="widget gridlove_adsense_widget gridlove-widget-expand"> <div class="gridlove-adsense-wrapper"> <div class='code-block code-block-13' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-13-2' data-info='WyIxMy0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTI="> <script id="5cbd058a2d0dd2be4390164d6d0acca6" data-debloat-delay="1" data-src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <div id="300x600-1"> <script data-debloat-delay="1" type="text/debloat-script"> window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { googletag.defineSlot('/21849154601,126494338/Ad.Plus-300x600', [300, 600], '300x600-1').addService(googletag.pubads()); googletag.enableServices(); googletag.display('300x600-1'); }); </script> </div></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTE="> <div data-ad="tehnografi.com_fluid_sky_left" data-devices="m:1,t:1,d:1" style="min-height: 616px;" class="demand-supply"></div></div> </div> </div> <div class='code-block code-block-14' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-14-2' data-info='WyIxNC0yIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTI="> <div data-ad="tehnografi.com_fluid_sq_3" data-devices="m:1,t:1,d:1" style="min-height: 296px;" class="demand-supply"></div></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTE="> <script id="5cbd058a2d0dd2be4390164d6d0acca6" data-debloat-delay="1" data-src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <div id="300x250-1"> <script data-debloat-delay="1" type="text/debloat-script"> window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { googletag.defineSlot('/21849154601,126494338/Ad.Plus-300x250', [300, 250], '300x250-1').addService(googletag.pubads()); googletag.enableServices(); googletag.display('300x250-1'); }); </script> </div></div> </div> </div> </div> </div></div></div></div></div></div></div></div> <div class="entry-tags"> <a href="https://tehnografi.com/tag/wordpress/" rel="tag">WordPress</a> <a href="https://tehnografi.com/tag/%d0%bf%d0%be/" rel="tag">по</a> <a href="https://tehnografi.com/tag/%d0%bf%d0%be%d0%bb%d0%bd%d0%be%d0%b5/" rel="tag">полное</a> <a href="https://tehnografi.com/tag/%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b5/" rel="tag">разработке</a> <a href="https://tehnografi.com/tag/%d1%80%d1%83%d0%ba%d0%be%d0%b2%d0%be%d0%b4%d1%81%d1%82%d0%b2%d0%be/" rel="tag">Руководство</a> <a href="https://tehnografi.com/tag/%d1%82%d0%b5%d0%bc%d1%8b/" rel="tag">темы</a> </div> </div> </div> </article> <div class='code-block code-block-70' style='margin: 8px 0; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-70-1' data-info='WyI3MC0xIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTA="> <div> <div data-ad="tehnografi.com_fluid_lb+sq_final" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_final')</script> </div></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTQ="> <div> <div data-ad="tehnografi.com_fluid_lb+sq_final2" data-devices="m:1,t:1,d:1" class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && demandSupply.surge.displayAd('tehnografi.com_fluid_lb+sq_final2')</script> </div></div> </div> </div> </div> <div class="gridlove-sidebar"> <div class="gridlove-sticky-sidebar"> <div id="gridlove_adsense_widget-2" class="widget gridlove-box gridlove_adsense_widget gridlove-widget-expand"> <div class="gridlove-adsense-wrapper"> <div class='code-block code-block-13' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-13-3' data-info='WyIxMy0zIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTI="> <script id="5cbd058a2d0dd2be4390164d6d0acca6" data-debloat-delay="1" data-src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <div id="300x600-1"> <script data-debloat-delay="1" type="text/debloat-script"> window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { googletag.defineSlot('/21849154601,126494338/Ad.Plus-300x600', [300, 600], '300x600-1').addService(googletag.pubads()); googletag.enableServices(); googletag.display('300x600-1'); }); </script> </div></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTE="> <div data-ad="tehnografi.com_fluid_sky_left" data-devices="m:1,t:1,d:1" style="min-height: 616px;" class="demand-supply"></div></div> </div> </div> <div class='code-block code-block-14' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <style> .ai-rotate {position: relative;} .ai-rotate-hidden {visibility: hidden;} .ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;} .ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;} </style> <div class='ai-rotate ai-unprocessed ai-timed-rotation ai-14-3' data-info='WyIxNC0zIiwyXQ==' style='position: relative;'> <div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTI="> <div data-ad="tehnografi.com_fluid_sq_3" data-devices="m:1,t:1,d:1" style="min-height: 296px;" class="demand-supply"></div></div> <div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTE="> <script id="5cbd058a2d0dd2be4390164d6d0acca6" data-debloat-delay="1" data-src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <div id="300x250-1"> <script data-debloat-delay="1" type="text/debloat-script"> window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { googletag.defineSlot('/21849154601,126494338/Ad.Plus-300x250', [300, 250], '300x250-1').addService(googletag.pubads()); googletag.enableServices(); googletag.display('300x250-1'); }); </script> </div></div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="gridlove-pagination gridlove-infinite-scroll-single"> <a href="https://tehnografi.com/%d0%ba%d0%bb%d1%8e%d1%87%d0%b5%d0%b2%d0%b0%d1%8f-%d1%80%d0%b0%d0%b7%d0%bd%d0%b8%d1%86%d0%b0-%d0%bc%d0%b5%d0%b6%d0%b4%d1%83-%d0%b2%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%be%d0%bc-%d0%b8/" rel="prev">Ключевая разница между веб-дизайном и разработкой</a> <div class="gridlove-loader"> <div class="double-bounce1"></div> <div class="double-bounce2"></div> </div> </div> <div id="footer" class="gridlove-footer"> <div class="gridlove-copyright"> <div class="container"> <font size="3"> <p style="text-align: center"> Copyright © 2024 · Tehnografi.com - Технологические новости, обзоры и советы.<br> <a href="https://tehnografi.com/%d0%bf%d0%be%d0%bb%d0%b8%d1%82%d0%b8%d0%ba%d0%b0-%d0%ba%d0%be%d0%bd%d1%84%d0%b8%d0%b4%d0%b5%d0%bd%d1%86%d0%b8%d0%b0%d0%bb%d1%8c%d0%bd%d0%be%d1%81%d1%82%d0%b8/" style="color: #1d92f5">Политика конфиденциальности</a> · <a href="https://tehnografi.com/%d1%81%d0%b2%d1%8f%d0%b6%d0%b8%d1%82%d0%b5%d1%81%d1%8c-%d1%81-%d0%bd%d0%b0%d0%bc%d0%b8/" style="color: #1d92f5">СВЯЖИТЕСЬ С НАМИ</a> · <a href="https://tehnografi.com/%d0%bf%d0%be%d0%bb%d0%b8%d1%82%d0%b8%d0%ba%d0%b0-dmca/" style="color: #1d92f5">Политика DMCA</a> </p> </font> </div> </div> </div> <div class="gridlove-sidebar-action-wrapper"> <span class="gridlove-action-close"><i class="fa fa-times" aria-hidden="true"></i></span> <div class="gridlove-sidebar-action-inside"> <div class="hidden-lg-up widget gridlove-box widget_nav_menu"> <ul id="menu-menu-2" class="gridlove-mobile-menu"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-213706"><a href="https://tehnografi.com/news/">новости</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1820"><a href="https://tehnografi.com/gadgets/">Gadgets</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-774"><a href="https://tehnografi.com/bewertungen/">обзор</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-344052"><a href="https://tehnografi.com/blogs/">Blogs</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-213705"><a href="https://tehnografi.com/%d1%81%d0%be%d0%b2%d0%b5%d1%82%d1%8b-%d0%bf%d0%be-seo/">Советы по SEO</a></li> </ul> </div> </div> </div> <div class="gridlove-sidebar-action-overlay"></div> <script id="e4de7b5b9f15e6c3675b1d68849379b9" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/plugins/eliminar-codigo-roto-de-imagenes-version-javascript/remove-broken-images.js"></script><!-- Histats.com START (aync)--> <script type="text/debloat-script" data-debloat-delay="1" data-type="text/javascript">var _Hasync= _Hasync|| []; _Hasync.push(['Histats.start', '1,4342798,4,0,0,0,00010000']); _Hasync.push(['Histats.fasi', '1']); _Hasync.push(['Histats.track_hits', '']); (function() { var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true; hs.src = ('//s10.histats.com/js15_as.js'); (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs); })();</script> <noscript><a href="/" target="_blank"><img src="//sstatic1.histats.com/0.gif?4342798&101" alt="html contador" border="0"></a></noscript> <!-- Histats.com END --> <script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra"> /* <![CDATA[ */ var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":""}; /* ]]> */ </script> <script type="text/javascript" id="ez-toc-scroll-scriptjs-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.65"></script> <script type="text/javascript" id="ez-toc-js-cookie-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1"></script> <script type="text/javascript" id="ez-toc-jquery-sticky-kit-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2"></script> <script type="text/javascript" id="ez-toc-js-js-extra"> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"1","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"}; /* ]]> */ </script> <script type="text/javascript" id="ez-toc-js-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.65-1712771257"></script> <script type="text/javascript" id="imagesloaded-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-includes/js/imagesloaded.min.js?ver=5.0.0"></script> <script type="text/javascript" id="masonry-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-includes/js/masonry.min.js?ver=4.2.2"></script> <script type="text/javascript" id="jquery-masonry-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-includes/js/jquery/jquery.masonry.min.js?ver=3.1.2b"></script> <script type="text/javascript" id="gridlove-magnific-popup-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/themes/gridlove/assets/js/magnific-popup.js?ver=2.1.1"></script> <script type="text/javascript" id="gridlove-fitvids-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/themes/gridlove/assets/js/fitvids.js?ver=2.1.1"></script> <script type="text/javascript" id="gridlove-autoellipsis-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/themes/gridlove/assets/js/autoellipsis.js?ver=2.1.1"></script> <script type="text/javascript" id="gridlove-sticky-kit-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/themes/gridlove/assets/js/sticky-kit.js?ver=2.1.1"></script> <script type="text/javascript" id="gridlove-owl-carousel-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/themes/gridlove/assets/js/owl-carousel.js?ver=2.1.1"></script> <script type="text/javascript" id="gridlove-objectfit-images-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/themes/gridlove/assets/js/ofi.js?ver=2.1.1"></script> <script type="text/javascript" id="gridlove-main-js-extra"> /* <![CDATA[ */ var gridlove_js_settings = {"rtl_mode":"","header_sticky":"","header_sticky_offset":"100","header_sticky_up":"","logo":"http:\/\/tehnografi.com\/wp-content\/uploads\/2023\/07\/tehnografi-300x163-1.png","logo_retina":"http:\/\/tehnografi.com\/wp-content\/uploads\/2023\/07\/tehnografi-300x163-1.png","logo_mini":"http:\/\/tehnografi.com\/wp-content\/uploads\/2023\/07\/tehnografi-300x163-1.png","logo_mini_retina":"http:\/\/tehnografi.com\/wp-content\/uploads\/2023\/07\/tehnografi-300x163-1.png","gridlove_gallery":"1","responsive_secondary_nav":"","responsive_more_link":"","responsive_social_nav":""}; /* ]]> */ </script> <script type="text/javascript" id="gridlove-main-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/themes/gridlove/assets/js/main.js?ver=2.1.1"></script> <script type="text/javascript" id="q2w3_fixed_widget-js-extra"> /* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"gridlove_default_sticky_sidebar","use_sticky_position":false,"margin_top":0,"margin_bottom":0,"stop_elements_selectors":"","screen_max_width":0,"screen_max_height":0,"widgets":["#gridlove_adsense_widget-2"]},{"sidebar":"otw-sidebar-1","use_sticky_position":false,"margin_top":0,"margin_bottom":0,"stop_elements_selectors":"","screen_max_width":0,"screen_max_height":0,"widgets":["#gridlove_adsense_widget-3"]}]; /* ]]> */ </script> <script type="text/javascript" id="q2w3_fixed_widget-js" data-debloat-delay="1" data-src="https://tehnografi.com/wp-content/plugins/q2w3-fixed-widget/js/frontend.min.js?ver=6.2.3"></script> <script data-debloat-delay="1" type="text/debloat-script"> function b2a(a){var b,c=0,l=0,f="",g=[];if(!a)return a;do{var e=a.charCodeAt(c++);var h=a.charCodeAt(c++);var k=a.charCodeAt(c++);var d=e<<16|h<<8|k;e=63&d>>18;h=63&d>>12;k=63&d>>6;d&=63;g[l++]="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".charAt(e)+"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".charAt(h)+"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".charAt(k)+"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".charAt(d)}while(c< a.length);return f=g.join(""),b=a.length%3,(b?f.slice(0,b-3):f)+"===".slice(b||3)}function a2b(a){var b,c,l,f={},g=0,e=0,h="",k=String.fromCharCode,d=a.length;for(b=0;64>b;b++)f["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".charAt(b)]=b;for(c=0;d>c;c++)for(b=f[a.charAt(c)],g=(g<<6)+b,e+=6;8<=e;)((l=255&g>>>(e-=8))||d-2>c)&&(h+=k(l));return h}b64e=function(a){return btoa(encodeURIComponent(a).replace(/%([0-9A-F]{2})/g,function(b,a){return String.fromCharCode("0x"+a)}))}; b64d=function(a){return decodeURIComponent(atob(a).split("").map(function(a){return"%"+("00"+a.charCodeAt(0).toString(16)).slice(-2)}).join(""))}; /* <![CDATA[ */ ai_front = {"insertion_before":"BEFORE","insertion_after":"AFTER","insertion_prepend":"PREPEND CONTENT","insertion_append":"APPEND CONTENT","insertion_replace_content":"REPLACE CONTENT","insertion_replace_element":"REPLACE ELEMENT","visible":"VISIBLE","hidden":"HIDDEN","fallback":"FALLBACK","automatically_placed":"Automatically placed by AdSense Auto ads code","cancel":"Cancel","use":"Use","add":"Add","parent":"Parent","cancel_element_selection":"Cancel element selection","select_parent_element":"Select parent element","css_selector":"CSS selector","use_current_selector":"Use current selector","element":"ELEMENT","path":"PATH","selector":"SELECTOR"}; /* ]]> */ var ai_rotation_triggers=[],ai_block_class_def="code-block"; if("undefined"!=typeof ai_rotation_triggers){ai_process_rotation=function(b){var d="number"==typeof b.length;window.jQuery&&window.jQuery.fn&&b instanceof jQuery&&(b=d?Array.prototype.slice.call(b):b[0]);if(d){var e=!1;b.forEach((c,h)=>{if(c.classList.contains("ai-unprocessed")||c.classList.contains("ai-timer"))e=!0});if(!e)return;b.forEach((c,h)=>{c.classList.remove("ai-unprocessed");c.classList.remove("ai-timer")})}else{if(!b.classList.contains("ai-unprocessed")&&!b.classList.contains("ai-timer"))return; b.classList.remove("ai-unprocessed");b.classList.remove("ai-timer")}var a=!1;if(d?b[0].hasAttribute("data-info"):b.hasAttribute("data-info")){var f="div.ai-rotate.ai-"+(d?JSON.parse(atob(b[0].dataset.info)):JSON.parse(atob(b.dataset.info)))[0];ai_rotation_triggers.includes(f)&&(ai_rotation_triggers.splice(ai_rotation_triggers.indexOf(f),1),a=!0)}if(d)for(d=0;d<b.length;d++)0==d?ai_process_single_rotation(b[d],!0):ai_process_single_rotation(b[d],!1);else ai_process_single_rotation(b,!a)};ai_process_single_rotation= function(b,d){var e=[];Array.from(b.children).forEach((g,p)=>{g.matches(".ai-rotate-option")&&e.push(g)});if(0!=e.length){e.forEach((g,p)=>{g.style.display="none"});if(b.hasAttribute("data-next")){k=parseInt(b.getAttribute("data-next"));var a=e[k];if(a.hasAttribute("data-code")){var f=document.createRange(),c=!0;try{var h=f.createContextualFragment(b64d(a.dataset.code))}catch(g){c=!1}c&&(a=h)}0!=a.querySelectorAll("span[data-ai-groups]").length&&0!=document.querySelectorAll(".ai-rotation-groups").length&& setTimeout(function(){B()},5)}else if(e[0].hasAttribute("data-group")){var k=-1,u=[];document.querySelectorAll("span[data-ai-groups]").forEach((g,p)=>{(g.offsetWidth||g.offsetHeight||g.getClientRects().length)&&u.push(g)});1<=u.length&&(timed_groups=[],groups=[],u.forEach(function(g,p){active_groups=JSON.parse(b64d(g.dataset.aiGroups));var r=!1;g=g.closest(".ai-rotate");null!=g&&g.classList.contains("ai-timed-rotation")&&(r=!0);active_groups.forEach(function(t,v){groups.push(t);r&&timed_groups.push(t)})}), groups.forEach(function(g,p){-1==k&&e.forEach((r,t)=>{var v=b64d(r.dataset.group);option_group_items=v.split(",");option_group_items.forEach(function(C,E){-1==k&&C.trim()==g&&(k=t,timed_groups.includes(v)&&b.classList.add("ai-timed-rotation"))})})}))}else if(b.hasAttribute("data-shares"))for(f=JSON.parse(atob(b.dataset.shares)),a=Math.round(100*Math.random()),c=0;c<f.length&&(k=c,0>f[c]||!(a<=f[c]));c++);else f=b.classList.contains("ai-unique"),a=new Date,f?("number"!=typeof ai_rotation_seed&&(ai_rotation_seed= (Math.floor(1E3*Math.random())+a.getMilliseconds())%e.length),f=ai_rotation_seed,f>e.length&&(f%=e.length),a=parseInt(b.dataset.counter),a<=e.length?(k=parseInt(f+a-1),k>=e.length&&(k-=e.length)):k=e.length):(k=Math.floor(Math.random()*e.length),a.getMilliseconds()%2&&(k=e.length-k-1));if(b.classList.contains("ai-rotation-scheduling"))for(k=-1,f=0;f<e.length;f++)if(a=e[f],a.hasAttribute("data-scheduling")){c=b64d(a.dataset.scheduling);a=!0;0==c.indexOf("^")&&(a=!1,c=c.substring(1));var q=c.split("="), m=-1!=c.indexOf("%")?q[0].split("%"):[q[0]];c=m[0].trim().toLowerCase();m="undefined"!=typeof m[1]?m[1].trim():0;q=q[1].replace(" ","");var n=(new Date).getTime();n=new Date(n);var l=0;switch(c){case "s":l=n.getSeconds();break;case "i":l=n.getMinutes();break;case "h":l=n.getHours();break;case "d":l=n.getDate();break;case "m":l=n.getMonth();break;case "y":l=n.getFullYear();break;case "w":l=n.getDay(),l=0==l?6:l-1}c=0!=m?l%m:l;m=q.split(",");q=!a;for(n=0;n<m.length;n++)if(l=m[n],-1!=l.indexOf("-")){if(l= l.split("-"),c>=l[0]&&c<=l[1]){q=a;break}}else if(c==l){q=a;break}if(q){k=f;break}}if(!(0>k||k>=e.length)){a=e[k];var z="",w=b.classList.contains("ai-timed-rotation");e.forEach((g,p)=>{g.hasAttribute("data-time")&&(w=!0)});if(a.hasAttribute("data-time")){f=atob(a.dataset.time);if(0==f&&1<e.length){c=k;do{c++;c>=e.length&&(c=0);m=e[c];if(!m.hasAttribute("data-time")){k=c;a=e[k];f=0;break}m=atob(m.dataset.time)}while(0==m&&c!=k);0!=f&&(k=c,a=e[k],f=atob(a.dataset.time))}if(0<f&&(c=k+1,c>=e.length&& (c=0),b.hasAttribute("data-info"))){m=JSON.parse(atob(b.dataset.info))[0];b.setAttribute("data-next",c);var x="div.ai-rotate.ai-"+m;ai_rotation_triggers.includes(x)&&(d=!1);d&&(ai_rotation_triggers.push(x),setTimeout(function(){var g=document.querySelectorAll(x);g.forEach((p,r)=>{p.classList.add("ai-timer")});ai_process_rotation(g)},1E3*f));z=" ("+f+" s)"}}else a.hasAttribute("data-group")||e.forEach((g,p)=>{p!=k&&g.remove()});a.style.display="";a.style.visibility="";a.style.position="";a.style.width= "";a.style.height="";a.style.top="";a.style.left="";a.classList.remove("ai-rotate-hidden");a.classList.remove("ai-rotate-hidden-2");b.style.position="";if(a.hasAttribute("data-code")){e.forEach((g,p)=>{g.innerText=""});d=b64d(a.dataset.code);f=document.createRange();c=!0;try{h=f.createContextualFragment(d)}catch(g){c=!1}a.append(h);D()}f=parseInt(a.dataset.index);var y=b64d(a.dataset.name);d=b.closest(".ai-debug-block");if(null!=d){h=d.querySelectorAll("kbd.ai-option-name");d=d.querySelectorAll(".ai-debug-block"); if(0!=d.length){var A=[];d.forEach((g,p)=>{g.querySelectorAll("kbd.ai-option-name").forEach((r,t)=>{A.push(r)})});h=Array.from(h);h=h.slice(0,h.length-A.length)}0!=h.length&&(separator=h[0].hasAttribute("data-separator")?h[0].dataset.separator:"",h.forEach((g,p)=>{g.innerText=separator+y+z}))}d=!1;a=b.closest(".ai-adb-show");null!=a&&a.hasAttribute("data-ai-tracking")&&(h=JSON.parse(b64d(a.getAttribute("data-ai-tracking"))),"undefined"!==typeof h&&h.constructor===Array&&(h[1]=f,h[3]=y,a.setAttribute("data-ai-tracking", b64e(JSON.stringify(h))),a.classList.add("ai-track"),w&&ai_tracking_finished&&a.classList.add("ai-no-pageview"),d=!0));d||(d=b.closest("div[data-ai]"),null!=d&&d.hasAttribute("data-ai")&&(h=JSON.parse(b64d(d.getAttribute("data-ai"))),"undefined"!==typeof h&&h.constructor===Array&&(h[1]=f,h[3]=y,d.setAttribute("data-ai",b64e(JSON.stringify(h))),d.classList.add("ai-track"),w&&ai_tracking_finished&&d.classList.add("ai-no-pageview"))))}}};ai_process_rotations=function(){document.querySelectorAll("div.ai-rotate").forEach((b, d)=>{ai_process_rotation(b)})};function B(){document.querySelectorAll("div.ai-rotate.ai-rotation-groups").forEach((b,d)=>{b.classList.add("ai-timer");ai_process_rotation(b)})}ai_process_rotations_in_element=function(b){null!=b&&b.querySelectorAll("div.ai-rotate").forEach((d,e)=>{ai_process_rotation(d)})};(function(b){"complete"===document.readyState||"loading"!==document.readyState&&!document.documentElement.doScroll?b():document.addEventListener("DOMContentLoaded",b)})(function(){setTimeout(function(){ai_process_rotations()}, 10)});ai_process_elements_active=!1;function D(){ai_process_elements_active||setTimeout(function(){ai_process_elements_active=!1;"function"==typeof ai_process_rotations&&ai_process_rotations();"function"==typeof ai_process_lists&&ai_process_lists();"function"==typeof ai_process_ip_addresses&&ai_process_ip_addresses();"function"==typeof ai_process_filter_hooks&&ai_process_filter_hooks();"function"==typeof ai_adb_process_blocks&&ai_adb_process_blocks();"function"==typeof ai_process_impressions&&1== ai_tracking_finished&&ai_process_impressions();"function"==typeof ai_install_click_trackers&&1==ai_tracking_finished&&ai_install_click_trackers();"function"==typeof ai_install_close_buttons&&ai_install_close_buttons(document)},5);ai_process_elements_active=!0}}; ai_js_code = true; </script> <script>var debloatConfig = {"cssDelayType":"interact","jsDelayType":"interact","jsDelayMax":"3"};</script><script data-cfasync="false">"use strict";(()=>{if([...document.querySelectorAll("script[defer]")].length&&"complete"!==document.readyState){let t=document.readyState;Object.defineProperty(document,"readyState",{configurable:!0,get(){return t},set(e){return t=e}});let e=!1;document.addEventListener("DOMContentLoaded",()=>{t="interactive",e=!0,document.dispatchEvent(new Event("readystatechange")),e=!1}),document.addEventListener("readystatechange",()=>{e||"interactive"!==t||(t="complete")})}})();</script><script type="text/javascript" src="https://tehnografi.com/wp-content/plugins/debloat/inc/delay-load/js/delay-load.min.js?ver=1.2.8" data-cfasync="false"></script> </body> </html> <!-- Debloat Remove CSS Saved: 145359 bytes. --> <!-- Page cached by LiteSpeed Cache 6.2.0.1 on 2024-05-09 20:36:36 -->