Создание новой области для виджета в WordPress

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

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

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

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

Шаг 1: Добавляем код вывода виджета в теме

Первым шагом является добавление следующей строки кода к той части вашей темы, которую вы хотите активизировать. Обязательно измените «Name of Widget Area» на имя, которое имеет смысл для вас. Вам нужно будет сделать это с помощью редактора кода, а затем загрузить файл через FTP-клиент.

<?php
 
if ( is_active_sidebar( 'slider-widget' ) ) : ?>
    <div id="slider-widget-area" class="slider-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'slider-widget' ); ?>
    </div>
     
<?php endif; ?>

Шаг 2: Реадактируем файл functions.php

В папке темы WordPress должен быть файл functions.php. Если этого не происходит, просто создайте новый файл и назовите его «functions.php». В файле functions.php добавьте следующий код:

function wpb_widgets_slider_init() {
 
    register_sidebar( array(
        'name'          => 'Slider Widget Area',
        'id'            => 'slider-widget',
        'before_widget' => '<div class="slider-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="slider-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_slider_init' );

Код выше должен быть обернут в PHP открытым и закрытым тегами (<? Php и?>, Соответственно). Если у вас уже есть файл functions.php, те теги уже будут там. Если вы создали его самостоятельно, вам придется добавить их.

Обязательно измените имя функции (в данном случае это «Name of Widget Area»), чтобы оно соответствовало имени, которое вы дали ему на шаге 1.

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

Параметры «before_title» и «after_title» позволяют вам обернуть заголовки виджетов в коде. В этом случае я завернул заголовок в тегах <h3> и </ h3> соответственно.

Шаг 3. Добавление виджетов

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

Теперь вы должны увидеть раздел «Name of Widget Area» в правой части экрана. Теперь просто нажмите и перетащите виджеты в окно, как ваша боковая панель!

Создание архитектуры масштабируемого приложения Node.js

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

Понятие «Архитектура приложения»

Любая программа, будь то десктопная или WEB, должна иметь определенные правила оформления кода: классов, файлов, методов, частей и т.д. Это делается, скорее всего, для того, чтобы увеличить производительность труда разработчиков и уменьшить риск возникновения непредвиденной работы программы, которую можно быстро идентифицировать и отладить. Существуют несколько подходов того, как должна строиться архитектура WEB — приложения, в частности, эти же правила можно перенести и на приложения Node.js — это MVC, HMVC, MOVE и другие. В данной же статье рассмотрим простейший пример реализации архитектуры приложения на основе модели MVC (Model-View-Controller). Не будем придумывать что такое MVC,  а приведем цитату первого абзаца из Википедии:

Model-view-controller (MVC, «модель-представление-поведение», «модель-представление-контроллер», «модель-вид-контроллер») — схема использования нескольких шаблонов проектирования, с помощью которых модель данных приложения, пользовательский интерфейс и взаимодействие с пользователем разделены на три отдельных компонента таким образом, чтобы модификация одного из компонентов оказывала минимальное воздействие на остальные. Данная схема проектирования часто используется для построения архитектурного каркаса, когда переходят от теории к реализации в конкретной предметной области

Модель MVC, как и любая другая, — это такая вещь, которая призвана упростить разделение труда разработчиков. Так, если одна группа разрабатывает интерфейс, другая — пишет код, третья — разрабатывает модель взаимодействия и хранения, то MVC с легкостью может все это соединить воедино, чтобы получить рабочее приложение и наоборот — может разделить так, что одна модель может иметь несколько представлений, к примеру, одни и те же данные из БД выводятся на одной странице сайта в виде круговой диаграммы, а в другой -в виде таблицы, но данные неизменны или другой пример, где один и тот же запрос пользователя может воздействовать на модель по разному в различных представления, в зависимости от настроек контроллера и вида. По способу взаимодействия MVC можно подразделить на MVC с пассивной моделью, где данные отправляет на вид контроллер и с активной моделью, где данные отправляет на вид сама модель

mvc-active-passive-model

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

Модульность в Node.js

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

var http = require('http');//Подключаем модуль приема и отправки по протоколу Http 
//Создаем объект нового сервера 
http.createServer(function (req, res) { //Передаем заголовок res.writeHead(200, {'Content-Type': 'text/plain'}); //Выводим запись 
res.end('Hello World\n'); }).listen(1337, '127.0.0.1');//Указываем адрес хоста 
//Уведомляем в консоли о том, что запущен наш сервер console.log('Server running at http://127.0.0.1:1337/');

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

npm install socket.io

Отсюда мы понимаем, что для того чтобы создать масштабируемое приложение нам будет необходимо разделить его на отдельные модули и подключать их к программе по мере необходимости и Node.js позволяет нам создавать собственные модули. Для примера разделим выше приведенный простой код на модули и получим идентичный результат. Чтобы разбить код на модули нам необходимо создавать файлы модулей, к примеру, мы создадим новый модуль под названием server в файле serevr.js и поместим в нее весь код работы с запросами к серверу, а в файле index.js мы запустим наш пользовательский модуль server.  Название модуля соответствует названию файла без расширения .js, код в файле server.js будет следующим

 

var http = require('http');//Подключаем модуль протокола http

function start()//Создаем метод запуска модуля
{
	function onRequest(req, res){
	  //Передаем заголовок
	  res.writeHead(200, {'Content-Type': 'text/plain'});
	  //Выводим запись
	  res.end('Hello World from Server!\n');
	}
	//Указываем адрес хоста
	http.createServer(onRequest).listen(1337, '127.0.0.1');
}
//Указываем, что данный метод доступен из вне
exports.start = start;

А в файле index.js запишем код подключения модуля server и ее запуска

var server = require('./server');//Подключаем наш модуль server
server.start();//Запускаем наш модуль сервер
//Уведомляем в консоли о том, что запущен наш сервер
console.log('Server running at http://127.0.0.1:1337/');

Запускаем наш пример командой

node [ваш путь]/server.js

если все запустилось удачно, то будет следующее сообщение в консоли

start-node-js-hello-world-result

 

После этого идем в браузер и набираем адрес нашего запущенного хоста

http://127.0.0.1:1337/

node-js-h-w-module-from-server

На этом пример создания простого модуля закончено.

Роутер и обработка запросов

В предыдущем пункте мы использовали такую функцию, как onRequest(req, res), где req(request) — объект запроса пользователя, а res(response) — это ответ пользователю. Не имеет значения как называется данная функция, она передается как параметр, для нас важны параметры, которые передаются в данную функцию. Данная функция еще называется функцией обратного вызова(callback), которая работает ассинхронно. Чтобы соответствовать уровню MVC нам необходимо определять получаемые запросы из параметра req  и передавать в параметр  res ответ в виде вида страницы. А вид страницы — это сверстанный HTML файл, и таких файлов столько, сколько необходимо для нашего приложения и пользователь видит только их. Обычно, данные файлы расположены в отдельной папке. Чтобы узнать какой запрос с POST и GET данными отправил пользователь, нам необходим роутер, который будет проверять и выдавать ту информацию, которую мы позволили нашему приложению. Продолжение следует…

2. WEB — графика с Three.js. Рисование линий

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

Линия — это один из примитивов в Three.js, наверное как и в любой графической библиотеке, на основе которой можно построить составные объекты. После предыдущей статьи нам будет легче ориентироваться в методологии рисовании на Three.js. Рисовать линию действительно просто, надо только знать базовые основы математики такие как декартовы координаты и векторы. Давайте возьмем код из первой статьи, а именно файл script.js, остальное будет прежним,  и перепишем так, чтобы Three.js нам вывел обычную линию

window.onload = init;
function init(){
	//--------------Создаем в дереве DOM элемент для вывода на экран-------
	container = document.createElement("div");
	document.body.appendChild(container);
	
	//--------------Общие переменные--------------
	var scene, camera, render;
	
	//--------------Инициализация общих переменных---------
	scene = new THREE.Scene();//Сцена
	camera = new THREE.PerspectiveCamera(65, window.innerWidth/window.innerHeight, 0.1, 2000);//Перспективная проекция камеры. Принимает 3 параметра(масштаб, пропорция, точка 0 вблизи, точка 0 в дали
    camera.position.x = 150;//Позиция камеры по x
	camera.position.z = 600;//Позиция камеры по y
	render = new THREE.WebGLRenderer();//Рендеринг
	render.setSize(window.innerWidth, window.innerHeight);//Инициализация рендерера
	
	//--------------Создаем объект-------------------
	var lineGeometry = new THREE.Geometry();//Производная фигура
	lineGeometry.vertices.push(new THREE.Vector3(0, 0, 0));//Указываем вектор первой точки
	lineGeometry.vertices.push(new THREE.Vector3(0, 200, 0));//Указываем вектор второй точки
	var lineMaterial = new THREE.LineBasicMaterial({color:0xFFFFFF, linewidth:500});
	var line = new THREE.Line(lineGeometry, lineMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(line);//Добавляем объект на сцену
	render.render(scene, camera);//Добавляем сцену и камеру в рендер
	container.appendChild(render.domElement);//Добавляем рендер в DOM для вывода на экран
}

Как видим все просто. Как видим из примера в Three.js существует понятие вектор и специальный объект для этого и при создании объекта будущей фигуры мы должны, передав вектору значения по координатным осям, передать нашему объекту в виде параметра метода вершин vertices() и он послужит для нас точкой, для определения второй точки поступаем тем же образом, а для того, чтобы указать Three.js, что мы хотим вывести именно линии, а не чисто 2 точки, то существует для этого специальный объект

THREE.Line(lineGeometry, lineMaterial)

который помимо объекта линии принимает еще и значение материала. Материал, в данном случае, принимает значения цвета и ширины линии. Пример работы показан на картинке ниже, а исходный код примера можете скачать здесь.
ThreejsLine-post-2

2. Инсталяция Yii фреймворка на локальный сервер и запуск демо-сайта

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

Итак. В прошлой статье   мы разбирали что такое фреймворк. Настал момент, когда уже пришло этот фреймворк «попробовать на зуб». В этом уроке мы детально опишем как настроить Yii и запустить демо-сайт, который прилагается к нему в виде стандартного примера использования MVC, данный пример служит шаблоном проектирования на Yii и вы можете на основе данного примера построить свой проект. В конце урока я выложу скринкаст с YouTube, чтобы наглядно показать сей процесс 🙂 .

В первую очередь, вам необходимо установить Apache сервер интерпретатор PHP 5 или выше, в данном уроке я считаю, что он у вас установлен, если нет, то  чтобы не затягивать процесс с настройками отдельных модулей( Apache, PHP и MySQL), советую вам установить комплект уже готовой сборки на примере Denwer или, что еще лучще и рекомендую —OpenServer.

Оба пакета бесплатные и еще, чтобы запускать команды PHP интерпретатора через командную строку вам необходимо будет указать в перeменных средах путь к php.ini, у OpenServer она находится в директории C:\OpenServer\userdata\config\PHP-5.5.4_php.ini, конечно же, если вы установили так же, как и я в корень диска C. Чтобы прописать в Path откройте следующую цепочку: Пуск -> Компьтер + левой кнопуи мыши щелчок -> свойства -Дополнительные параметры системы -> перменные среды, выбираем Path +изменить и добавляем через ; путь  C:\OpenServer\userdata\config\PHP-5.5.4_php.ini:

 

perem-sredy-php-yii-inst

 

1. Первым делом нам необходимо скачать код фреймворка со всеми примера с оффициального сайта и разархивировать в папку на рабочий стол по именем yii(я условно назвал, не имеет разницы как вы папку назовете, главноеразархивируйте туда все содержимое);

2. Создаем на локальном сервере хост с новым доменным именем, к примеру, я назвался у себя как websofter.loc, и кидаем туда все содержимое архива архива, прямо в корень;

3. Теперь нам надо проинсталировать наш фреймворк и для этого нам будет необходимо выполнить файл yiic , который находится в папке C:\OpenServer\domains\WebSofter.loc\yii\framework и для этого заходим в командную строку и переходим в папку C:\OpenServer\domains\WebSofter.loc\yii\framework, выполнив команду:


>cd C:\OpenServer\domains\WebSofter.loc\yii\framework

perem-sredy-php-yii-cmd

4. Перешли в папку и теперь надо набрать команду php и запустить файл инсталяции yiic и указать папку, куда надо инсталлировать, а инсталлировать мы будем в корневую папку и для этого укажем в параметре путь C:\OpenServer\domains\WebSofter.loc, команда такая:

C:\OpenServer\domains\WebSofter.loc\yii\framework> php -f yiic webapp C:\OpenServer\domains\WebSofter.loc

после этого вам будет уведомление об установке примера, вы жмете yes и после успешно установки будет вот такое окно:

perem-sredy-php-yii-succefull

5. Все!  Процедура установки окончена и чтобы проверить работоспособность сайта откройте свой адрес локального хоста и у вас должен запуститься демо-сайт:

perem-sredy-php-yii-site

И все это можете еще подробно просмотреть на виде:

Удачной установки! 🙂