Архив рубрики: Публикации

Удалить пустые строки в CSS стилях и увеличить скорость веб-сайта

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

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

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

Удалить пустые строки в CSS стилях и увеличить скорость веб-сайта

Quickest Fix

С помощью команды Find & Replace я буду показывать вам, занимает менее 2 минут.

Пустые строки в CSS стилях

Я большой поклонник WordPress, но даже в их таблицах стилей есть некоторые пустые строки.

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

Я выделил эти пространства на скриншоте ниже:

Пустые строки в CSS Stylesheet

Это не о чем беспокоиться. Есть множество сайтов на WordPress с таблицами стилей где такая же проблема.

Но было бы лучше, если удалить пробелы и добиться немного более быстрой загрузки.

Пустые строки и нечитабельность кода

В то время как одиночные пустые строки между правилами CSS не является проблемой, много и много пространств.

Несколько пустых строк, как правило, появляются, когда сделаны многочисленные настройки к CSS.

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

Вот скриншот того, о чем я говорю:

Пустые строки и нечитабельность кода

Выглядит знакомо?

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

Становится хуже

Хорошо, еще одна история, прежде чем я расскажу вам, как удалить эти досадные линии.

На днях я скачал свою таблицу стилей с моего сервера с намерением сделать несколько изменений.

Я скопировал style.css на рабочий стол с помощью FileZilla .

Тем не менее, когда я открыл таблицу стилей в Dreamweaver я столкнулся с этим ужасом:

Становится хуже

Ага. Дополнительная пустая строка была вставлена между каждой линией. Таблица стилей теперь в два раза дольше!

2582 строк кода стали 5164 строк кода!

Все белые пространства напоминали мне о неудачной игры Tetris -).

Как это произошло?

В конце концов я понял, что это было связано с CloudFlare.

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

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

Удалить пустые строки из таблицы стилей в Dreamweaver

Вот то, что вам нужно сделать:

  1. Откройте таблицу стилей в любой версии Dreamweaver.

  2. Нажмите CTRL и F (или выберите Find and Replace из меню Edit).

  3. Введите [rn]{2} в поле Find (найти).

  4. Введите n в поле Replace (Заменить).

  5. Нажмите Replace All (Заменить все).

Dreamweaver потратит 1 — 2 минуты, автоматически удаляя пустые строки.

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

Сохраните его и скопируйте обратно в свой каталог веб-сайта.

Если первое решение не работает, попробуйте это вместо того:

  1. Введите rnrn в поле Find (найти).

  2. Введите n в поле Replace (Заменить).

  3. Нажмите Replace All (Заменить все).

Анализ

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

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



2016-10-10T17:42:02
Лучшие учебники по Wodpress

Что такое: GPL

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

Проект WordPress рассматривает лицензию GPL и обеспечивает основные базовые ценности, кто верит в проект.

  • Любой пользователь может загрузить и запускать программное обеспечение

  • Любой пользователь может изменить его

  • Любой желающий может распространять бесплатные копии программного обеспечения

  • Любой человек может распространять измененные версии программного обеспечения.

Wordpress and GPL

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

Дополнительная литература



2016-10-10T15:12:58
Глоссарий

Что такое: Действие (Action)

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

Чтобы дать вам пример того, каким образом они могут быть использованы для добавления кода на веб-сайт давайте предположим, что вы хотите добавить информацию об авторских правах в свой колонтитул. Для того чтобы сделать это, вы могли бы изменить шаблон нижней части непосредственно. В некоторых случаях это было бы предпочтительнее, но много раз, это гораздо проще, и лучшая практика, чтобы подключить ваш код заранее определенного действия, который уже выполнен в сноске. Для этого вы можете добавить свой код авторского права в функцию в файле functions.php. Затем вы можете добавить эту функцию в действии, которое находится в том месте, где вы хотите поместить ваш код авторского права.

function copyright_my_notice() {

   echo "Авторское право. Все права защищены";

}

add_action('wp_footer','copyright_my_notice');

 

В данном примере copyright_my_notice это действие устанавливает хук в wp_footer. Функция copyright_my_notice будет выполняться всякий раз, когда хук wp_footer() появится в коде темы WordPress.

WordPress предлагает список доступных действий в Plugin API.

Дополнительная литература



2016-10-09T10:56:11
Глоссарий

6 инфографик, чтобы помочь вам лучше понять WordPress

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

1. Структура базы данных WordPress

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

Структура базы данных WordPress

2. WP_Query против query_posts () против get_posts ()

Несмотря на использование Comic Sans, эта блок-схема может быть очень полезным, чтобы решить, как показывать посты в цикле или вне в WordPress.

ps:  query_posts () не должно больше использоваться, но WP_Query еще можно использовать. Проверьте это обсуждение на Stack бирже для получения дополнительной информации. Чтобы сделать его коротким: Используйте , pre_get_posts чтобы изменить ваш основной запрос. Используйте отдельный WP_Query объект (метод 2) для вторичных контуров на страницах шаблона.

WP_Query против query_posts () против get_posts ()

3. Основная структура темы в WordPress

Визуально пытаемся объяснить основную структуру темы WordPress для начинающих.

Основная структура темы в WordPress

4. Анатомия темы WordPress

Созданный известным консультантом WordPress Йоаст, это инфографика идет глубже в объяснении анатомии темы WordPress.

anatomiya-temy-wordpress

5. Иерархия шаблонов WordPress

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

Иерархия шаблонов WordPress

6. Цикл в WordPress

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

Цикл в WordPress



2016-10-08T13:42:17
Витрина

Как создать тему WordPress?

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

Как создать основную тему WordPress?

Для того, чтобы начать строить свою тему, сначала нужно создать вложенную папку в каталоге wp-content/themes в вашей папке WordPress. Для этого урока мы будем называть папку «tutorial_themes». Имя папки должно соответствовать названию темы, которую вы хотите создать. Для этого вы можете использовать любой FTP — клиент или менеджер файлов в вашей хост-панели.

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

Для этого мы должны создать следующие файлы в директории tutorial_themes:

  • header.php — Этот файл будет содержать код для раздела заголовка темы;

  • index.php — Это главный файл для темы. Он будет содержать код для главной области и указывать, где будут включены другие файлы;

  • sidebar.php — Этот файл будет содержать информацию о боковой панели;

  • footer.php — Этот файл будет обрабатывать нижний коллонтитул;

  • style.css — Этот файл будет обрабатывать стиль вашей новой темы;

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

Теперь давайте рассмотрим каждый файл и что он должен содержать:

Файл header.php

В этом файле вы должны добавить следующий код:

<html>

<head>

<title>Учебник по темам</title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

</head>

<body>

<div id="wrapper">

<div id="header">

<h1>ЗАГОЛОВОК</h1>

</div>

 

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

Сразу же после титула мы добавим

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

 

он сообщает WordPress, чтобы загрузить файл style.css. Он будет обрабатывать стиль вашего сайта.

<?php bloginfo('stylesheet_url'); ?>

 

это функция WordPress, которая на самом деле загружает файл таблицы стилей.

Затем мы добавили в начало «div» с классом обертку, которая будет основной контейнер сайта. Мы установили класс для этого, чтобы мы могли изменить его с помощью файла style.css.

После этого мы добавили простое название ЗАГОЛОВОК, завернутое в «div» с классом «header», который будет позже указан в файле таблицы стилей.

Файл index.php

<?php get_header(); ?>

<div id="main">

<div id="content">

<h1>Главная облать</h1>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<h1><?php the_title(); ?></h1>

<h4>Опубликован <?php the_time('F jS, Y') ?></h4>

<p><?php the_content(__('(далее...)')); ?></p>

<hr> <?php endwhile; else: ?>

<p><?php _e('Извините, нет постов по вашим запросам.'); ?></p><?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<div id="delimiter">

</div>

<?php get_footer(); ?>

 

Код в этом файле начинается с

<?php get_header(); ?>

 

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

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

Далее, мы включаем файл sidebar.php с этой линии

<?php get_sidebar(); ?>

 

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

После этой линии, мы вставляем пустой «div», который будет разделять основной областью и боковую панель от нижнего колонтитула.

Наконец, мы добавляем одну последнюю строку

<?php get_footer(); ?>

 

который будет включать файл footer.php на вашей странице.

Файл sidebar.php

В sidebar.php мы добавим следующий код:

<div id="sidebar">

<h2 ><?php _e('Категории'); ?></h2>

<ul >

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

</ul>

<h2 ><?php _e('Архивы'); ?></h2>

<ul >

<?php wp_get_archives('type=monthly'); ?>

</ul>

</div>

 

В этом файле мы используем внутренние функции WordPress для отображения категории и архивы постов. Функция возвращает WordPress их как элементы списка, поэтому мы обернули фактические функции в не отсортированных списках (теги <ul>).

Файл footer.php

Вы должны добавить эти строки в файл footer.php:

<div id="footer">

<h1>ПОДВАЛ</h1>

</div>

</div>

</body>

</html>

 

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

Файл style.css

Добавьте следующие строки в файл style.css:

body { text-align: center; }

#wrapper { display: block; border: 1px #a1a2a2 solid; width:90%; margin:0px auto; }

#header { border: 1px #a2a2a2 solid; }

#content { width: 74%; border: 2px #a1a2a2 solid; float: left; }

#sidebar { width: 24%; border: 2px #a1a2a2 solid; float: right; }

#delimiter { clear: both; }

#footer { border: 1px #a1a2a2 solid; }

.title { font-size: 12pt; font-family: verdana; font-weight: bold; }

 

Этот простой файл CSS устанавливает основный дизайн вашей темы. Эти строки устанавливают фон вашей страницы и окружены основные части вашего сайта границами для удобства.

Как создать тему WordPress?

Как мы уже упоминали, внутренние функции WordPress часто используются в коде темы. Вы можете взглянуть на полный Справочник по функциям на официальном сайте WordPress для получения дополнительной информации о каждой функции.

С этого момента вы можете изменить файл CSS, добавлять изображения, анимацию и другое содержание к вашей теме, чтобы достичь какого вы хотите внешнего вида для вашего блога!



2016-10-08T10:37:29
Темы WordPress

Что такое: Массив (Array)

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

WordPress написан на языке программирования PHP и, следовательно, как WordPress пользователь вы можете встретить их во время работы над темами WordPress или плагинов или просто смотря на основной код в WordPress. В PHP функция array() используется для их создания. Есть три типа, которые могут быть созданы в PHP:

  • Indexed — используйте цифровые клавиши для доступа к значениям

  • Associative — использовать текстовые или строковые ключи для доступа к значениям

  • Multidimensional — содержат более одного массива

Многие массивы используются для контура с помощью набора данных и выполняют какую-то операцию по каждому значению. Например, если у вас есть три части фруктов, где можно хранить каждую из них как отдельную переменную, как здесь:

$fruit1 = "coconut";

$fruit2 = "orange";

$fruit3 = "melon";

 

Это может быстро получить очень некрасиво. Лучшим решением было бы поместить их в массив, как ниже:

$fruit = array("coconut", "orange", "melon");

 

Теперь вы можете делать такие вещи, как использование встроенных функций массива для выполнения операций над данными. Например, count() скажет вам, сколько элементов в массиве. $fruit[2] будет равен ‘melon’ (массивы начинаются с нуля).

Пример в WordPress :

Переменная $args представляет собой массив, сохраняет ряд аргументов. Они затем передаются в функцию wp_list_categories.

<?php

$args = array(

  'taxonomy'     => 'category',

  'orderby'      => 'name',

  'show_count'   => 0,

  'pad_counts'   => 0,

  'hierarchical' => 1,

  'title_li'     => 'Categories'

);

?>



<ul>

<?php wp_list_categories( $args ); ?>

</ul>

 



2016-10-08T09:28:53
Глоссарий