Как построить Bootstrap из исходников

👁 18 просмотров

Настройка инструментов

Bootstrap использует скрипты NPM для их построения. Наш package.json включает подходящие методы для работы с фреймворком, включающие компиляцию кода, запуск тестов и многое другое.

Используя систему построения Bootstrap можно запустить документацию локально, вам всего лишь нужно скачать исходники последней версии Bootstrap и Node.js. В следующих шагах предполагается, что вы готовы к подводным камням:

  1. Загружаем и устанавливаем Node.js, который будет необходим для управления зависимостями Bootstrap;
  2. Переходим в корень папки скачанных исходников /bootstrap  и выполняем команду npm install для установки наших локальных зависимостей, находящихся в списке файла package.json;
  3. Устанавливаем Ruby, устанавливаем Bundler при помощи команды gem install bundler, и в конце запускаем команду установки bundle install. Это должно установить все зависимости Ruby, такие как Jekyll и плагины.

Замечания для пользователей Windows. Необходимо читать это руководство для получения Jekyll и установить без проблем.

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

Bootstrap использует скрипты NPM для построения. Наш package.json включает методы для работы с фреймворком, включая компиляции кода, запуска тестов и другое.

 

Использование скриптом NPM

Наш package.json включает следующие команды и задачи:

Задача Описание
npm run dist npm run dist создает папку /dist с скомпилированными файлами. Используются SassAutoprefixer и UglifyJS.
npm test Похоже на npm run dist и плюс это запустит документацию локально.
npm run docs Построение и склейка CSS/JavaScript для документации. Вы сможете затем запустить документацию локально npm run docs-serve.

Обновление WordPress без данных FTP

👁 19 просмотров

В зависимости от настройки серверов обновление движка/тем/плагинов может требовать от пользователя адрес сервера, логин и пароль для FTP. Обычно это происходит, когда веб-сервер запущен от имени другого пользователя. Попробуйте добавить в wp-config.php строку:

define('FS_METHOD', 'direct');

…и обновление будет происходить напрямую.

Установка темы Zurb Foundation на свой WordPress — сайт

👁 45 просмотров

Что, если вы решили изменить библиотеке Bootstrap и решили попробовать на вкус альтернативный вариант в виде Zurb Foundation? Эта статья покажет, как его установить и скомпилить.

Начальные условия

У нас есть установленный голый движок WordPress, который работает у нас либо на локальном или удаленном сервере.

Перед работой с темой

Для компиляции исходников темы нам будет необходим Node.js с инструментами разработки. Устанавливаем его по инструкции, в зависимости у кого какая система. К примеру, если у нас уделанный сервер на Ubuntu, то нам подходит инструкци я в этом разделе:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install -y build-essential
  1. Первым делом скачиваем исходники темы-скелетона по адресу или на GitHub.
  2. Устанавливаем эту тему в нашу систему WordPress, но если сейчас открыть сайт, то ничего не заработает, потому что тема еще не скомпилирована.
  3. Входим в корневую папку темы через командную строку системы и выполняем процесс компиляции и настройки:

Устанавливаем все зависимости

npm install

Конфигурируем и для этого необходимо файл config-default.yml скопировать под именем config.yml и произвести ряд настроек (актуально, если у вас локальный сервер).

Запускаем процесс построения

npm run build

Создание конечного архива с темой

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

npm run package

Данная команда соберет все скомпилированные исходники без лишних вспомогательных файлов в один zip — архив темы в папке packaged.

Примечания

Если выходи ошибка npm ERR! Failed at the node-sass@4.7.2 postinstall script. , надо установить зависимости для sass

sudo npm i gulp-sass -ES --unsafe-perm=true

 

Раскрытие выпадающего меню при наведении в Bootstrap 3/4

👁 87 просмотров

По-умолчанию выпадающиее меню в Bootstrap раскрывается при клике и сворачивается тоже только при клике мышкой.

Было бы не плохо, чтоб раскрытие и сворачивание меню происходило при наведении мышки. И это сделать совершенно не сложно! Для этого нужно лишь добавить CSS правило:

.dropdown:hover > .dropdown-menu { 
    display: block; 
}

И выпадающее меню реагирует на наведение.

Отключение обновлений в WordPress

👁 36 просмотров

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

Запретить обновление темы

Рассмотрим отключение обновлений тем. Тут привести 3 способа, как это сделать.

Способ 1.

Суть первого способа заключается в изменении файла стилей. Да да, именно файла стилей — style.css. В начале этого файла, пишутся некоторые параметры, например — название темы, автор и нужная нам версия.

Выглядит такая строка примерно так — Version: 1.0, смотрите внимательно. она где-то в начале. Так вот, чтобы отключить обновления, Вам просто нужно изменить версию на другую, которая будет побольше, например так — Version: 999.0.

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

 

Способ 2. 

Второй способ потребует от Вас тоже небольшого вмешательства в код темы, а именно в файл пользовательских функций — functions.php. Открываем его для редактирования, а потом в самый конец перед закрывающим тегом PHP — ?>, если такого нет, то просто в конец, добавляем такие вот функции.

// отключаем обновление тем
remove_action( 'load-update-core.php', 'wp_update_themes' );
add_filter( 'pre_site_transient_update_themes', '__return_null' );
 
// отключаем авто обновления
add_filter( 'auto_update_theme', '__return_false' ); 
 
// спрячем имеющиеся уведомления
add_action('admin_menu','hide_admin_notices');
function hide_admin_notices() {
    remove_action( 'admin_notices', 'update_nag', 3 );
}

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

Способ 3.

Последний способ, наверное самый простой, но требует установки плагина. Скачивает с сайта WordPress плагин — Easy Updates Manager или WordPress Theme Updates, ну и подобные им, которые сделают все за Вас.

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

Запретить обновление плагина

В некоторых случаях может оказаться, что обновлять плагин вам не нужно. Это может произойти, если вы самостоятельно внесли доработки и изменения в код плагина. Тогда обновление перезапишет все ваши правки. Либо же если авторы плагина в чем-то изменили концепцию, и новая версия вас больше не устраивает. В моем случае так случилось с замечательным плагином NextGen Gallery, который после обновления до версии 2 стал неповоротливым и тяжело модифицируемым.

Способ 1.

Версия плагина прописывается в начале его главного файла. Открываем список плагинов, выбираем нужный и нажимаем «Изменить».

<?php
/*
Plugin Name: NextGEN Gallery
Plugin URI: http://www.nextgen-gallery.com/
Description: A NextGENeration Photo Gallery for WordPress
Author: Photocrati
Author URI: http://www.photocrati.com/
Version: 1.9.13

Если заменить значение «Version:» на большое число, например 99.99, то проверка обновлений будет сообщать, что установленная  версия новее, и не будет предлагать обновиться.

Способ 2.

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

<?php
$DISABLE_UPDATE = array( 'nextgen-gallery', 'nospamnx', 'другие-плагины');

Где значением элемента массива является название директории, в которой расположен плагин,  или его название, если плагин не имеет своей категории (состоит из одного файла).

Затем в файл functions.php текущей темы следует добавить код, который будет обрабатывать данный массив и запрещать для указанных плагинов обновления:

<?php
// запрет обновления выборочных плагинов
function filter_plugin_updates( $update ) {    
    global $DISABLE_UPDATE; // см. wp-config.php
    if( !is_array($DISABLE_UPDATE) || count($DISABLE_UPDATE) == 0 ){  return $update;  }
    foreach( $update->response as $name => $val ){
        foreach( $DISABLE_UPDATE as $plugin ){
            if( stripos($name,$plugin) !== false ){
                unset( $update->response[ $name ] );
            }
        }
    }
    return $update;
}
add_filter( 'site_transient_update_plugins', 'filter_plugin_updates' );

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

Источники:

  1. Как отключить обновления темы WordPress
  2. Запрещаем обновление конкретного плагина в WordPress

Как сделать из папки в корне сайта корневой раздел при помощи .htaccess?

👁 29 просмотров

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

RewriteEngine On

# Map http://www.example.com to /folder.
RewriteRule ^$ /folder/ [L]

# Map http://www.example.com/x to /folder/x unless there is a x in the web root.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/folder/
RewriteRule ^(.*)$ /folder/$1

# Add trailing slash to directories within folder
# This does not expose the internal URL.
RewriteCond %{SCRIPT_FILENAME} -d
RewriteRule ^folder/(.*[^/])$ http://www.example.com/$1/ [R=301]

Проверка файла на изображение на языке PHP

👁 39 просмотров

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

Функция getimagesize в php предоставляет много информации о файле изображения, включая его тип. Тип может использоваться, чтобы проверить, является ли файл допустимым файлом изображения или нет.

Чтобы проверить, является ли файл изображением или нет, используйте функцию

function is_image($path)
{
    $a = getimagesize($path);
    $image_type = $a[2];
     
    if(in_array($image_type , array(IMAGETYPE_GIF , IMAGETYPE_JPEG ,IMAGETYPE_PNG , IMAGETYPE_BMP)))
    {
        return true;
    }
    return false;
}

$a[0] и $a[1] — ширина и высота изображения. $a[2] содержит тип изображения. Другие форматы изображений:

[IMAGETYPE_GIF] => 1
[IMAGETYPE_JPEG] => 2
[IMAGETYPE_PNG] => 3
[IMAGETYPE_SWF] => 4
[IMAGETYPE_PSD] => 5
[IMAGETYPE_BMP] => 6
[IMAGETYPE_TIFF_II] => 7
[IMAGETYPE_TIFF_MM] => 8
[IMAGETYPE_JPC] => 9
[IMAGETYPE_JP2] => 10
[IMAGETYPE_JPX] => 11
[IMAGETYPE_JB2] => 12
[IMAGETYPE_SWC] => 13
[IMAGETYPE_IFF] => 14
[IMAGETYPE_WBMP] => 15
[IMAGETYPE_JPEG2000] => 9
[IMAGETYPE_XBM] => 16
[IMAGETYPE_ICO] => 17
[IMAGETYPE_UNKNOWN] => 0
[IMAGETYPE_COUNT] => 18

Замечание. mpeg видео обнаруживается как IMAGETYPE_ICO

Метки: