Browsing "Web-дизайн"
Окт 14, 2016 - Web-дизайн    No Comments

Колонки одинаковой высоты

Колонки одинаковой высоты

Колонки одинаковой высоты

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

Read more »

Сен 20, 2016 - Уроки php    No Comments

§4. PHP и MySQL - пишем свою CMS

Как написать свою CMS на базе PHP и MySQL? Как сделать собственную административную панель (админку) на php?

Наверное, многие могли задаваться подобными вопросами, но сложности в изучении и скудный материал в сети Интернет вряд ли содействовал в этом. Скудный, спросите вы, несмотря на обилие копипастов? Да, отвечу я, ибо на десятках сайтах копирующих тупо копирующих статьи со сторонних источников, распространяются одни и те же ошибки, которые становятся серьезнейшим камнем преткновения для начинающих изучать PHP. Многочисленные высоколобые форумчане зачастую не могут разобраться в наипростейших кодах, что приходится самому разбираться во всем.

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

Итак, в этой статье я представляю работающий код простой админки и шаблона, позволяющего создавать и редактировать статьи, используя php.

Read more »

Сен 16, 2016 - Уроки php    No Comments

§1. Пример создания сайта на php

Пример создания сайта на PHP

Конечно для создания простого сайта можно использовать CMS Joomla или просто сделать сайт на WordPress, но зачем стрелять по комарам из пистолета?

сайт на php

Создание сайта на php

Для этих целей вполне подойдет статический сайт на HTML, но ведь иногда заказчик хочет расширить функционал своего сайта, добавить новые страницы, изменить дизайн и т. п. Поэтому уже изначально я начинаю разрабатывать динамический движок сайта, используя язык программирования PHP. Именно PHP лежит в основе разработок всех известных и популярных CMS. Поэтому знать его основы я думаю не помешает любому веб-мастеру, ведь тогда он будет более свободно и уверенно манипулировать движком своей CMS.

Read more »

Сен 13, 2016 - Web-дизайн    No Comments

1. Основы шаблонов WordPress

Структура страницы WordPress

Простая web-страница WordPress сделана из трех основных блоков: заголовок (header), контент и подвал (footer). Каждый из этих блоков формируется на основе файла шаблона текущей темы WordPress.

Заголовок

Контент

Подвал

  • Заголовок содержит всю информацию, которая должна быть наверху — т.е. внутри тега <head> — вашей XHTML web-страницы, так же, как и теги <doctype><meta> и ссылки на таблицы стилей. Он также включает открытый тег <body> и видимый заголовок вашего блога (который обычно содержит название вашего сайта, а также может содержать навигационное меню, логотип, описание сайта и т.д.).
  • Блок контента содержит записи и страницы вашего блога, т.е. "основу" сайта.
  • Подвал содержит информацию, которая находится в самом низу страницы, например ссылки на остальные страницы или категории вашего сайта в меню, авторские права, контактную информацию и т.п.

 

Основные файлы шаблона

Чтобы сформировать структуру темы WordPress, начните с файла шаблона index.php в папке вашей темы. У этого файла две основные функции:

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

В нашей упрощенной структуре нам достаточно включить два других файла шаблона: заголовок и подвал. Они должны быть названы header.php и footer.phpТеги шаблонов, которые включают их, выглядят так:

<?php get_header(); ?>

<?php get_footer(); ?>

Если нужно показать записи и страницы вашего блога (и настроить их внешний вид), файл index.php должен запустить цикл WordPress между вызовами файлов заголовка и подвала.

Более сложные структуры страниц

Заголовок

Контент

Боковая панель

Подвал

Множество тем WordPress используют одну или несколько боковых панелей, которые содержат меню навигации и дополнительную информацию о вашем сайте. Боковая панель формируется с помощью файла шаблона sidebar.php. Он может быть включен в файл шаблона index.php с помощью следующей строки (теги шаблонов):

<?php get_sidebar(); ?>

А где все остальное?

Заметьте, что мы не включили шаблонный тег для "получения" контента нашей web-страницы. Это потому, что контент формируется в цикле WordPress, внутри index.php.

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

Файлы шаблонов внутри файлов шаблонов

Вы узнали, как WordPress включает стандартные файлы шаблона (заголовок, подвал и боковую панель) в файле index.php. Но вы также можете включить и другие файлы шаблона в любом из ваших файлов.

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

<?php get_search_form(); ?>

Нам больше не нужно использовать "include" и "TEMPLATEPATH" для вставки нашей формы поиска в темы, т.к. WordPress предоставляет нам вышеуказанный тег шаблона.

Заголовок

Контент

Форма комментариев

Боковая панель

Форма поиска

Подвал

Множество тем WordPress включают в себя различные файлы шаблона для формирования web-страниц на сайте. Ниже приведен список типичных файлов для основного шаблона (index.php) сайта на WordPress:

  • header.php
    • theloop.php (контент)
    • wp-comments.php
  • sidebar.php
    • searchform.php
  • footer.php

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

Специальные файлы шаблона

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

Иерархия шаблонов WordPress отвечает на следующий вопрос:

Какой файл шаблона будет использовать WordPress при формировании определенного типа страниц?

WordPress автоматически распознает файлы шаблона с определенными стандартными именами и использует их для определенного типа страниц. Например, когда пользователь кликает на заголовок записи блога, WordPress знает, что тот хочет увидеть именно эту статью на своей собственной странице. Иерархия шаблонов WordPress будет использовать файл шаблона single.php вместо index.php для формирования страницы — если в вашей теме есть файл single.php. Так же, если пользователь кликнет на ссылку для конкретной категории, WordPress будет использовать шаблон category.php, если найдет его; если нет, он будет искать archive.php, а если и этот шаблон не существует, WordPress будет использовать основной шаблон index.php. Вы можете сделать специальный шаблон для конкретной категории (см. Шаблоны категорий), или даже шаблоны для конкретных страниц.

Советы по файлам шаблонов

Здесь приведены несколько советов по созданию файлов шаблонов:

Отслеживайте открывающие и закрывающие теги
Файлы шаблона подразумевают использование тегов XHTML и ссылок на CSS. Элементы HTML и ссылки на CSS могут "пересекать" файлы шаблона, т.е. начинаться в одном файле и заканчиваться в другом. Например, HTML элементы html и body обычно начинаются в header.php и заканчиваются в footer.php. Большинство тем WordPress используют HTML элементы div, которые также могут охватывать несколько файлов. Например, основной div для контента страницы может начаться в header.php и закончиться либо в index.php, либо в single.php. Отслеживание начала и конца элементов HTML может быть довольно сложным в процессе разработки или изменения тем. Используйте комментарии чтобы отмечать в файлах шаблона, где открываются и закрываются теги большого контейнера, так что вы сможете отслеживать, где какой div, и в какой секции.
Тестируйте разные файлы шаблона с разными типами страниц
Если вы сделали изменения в шаблоне комментариев, боковой панели, форме поиска или любом другом файле шаблона, протестируйте их на разных типах страниц (одиночная запись блога, разные типы архивов, страницы).
Дополнительные комментарии
Если вы разрабатываете темы для публикации, то учтите, что тот, кто скачает вашу тему, возможно захочет немного модифицировать ее для собственного использования. Так что будет весьма полезным оставлять комментарии в ваших файлах шаблона в тех местах, где вы сделали изменения относительно стандартной логики классических тем. Также неплохо будет добавить комментарий, если вы подключили свою собственную таблицу стилей где-нибудь в header.php.
Не забывайте закрывать HTML теги
Если вы открыли тег (например, div) в одном файле шаблона и не закрыли его там же, убедитесь, что тег закрыт в другом файле. На форуме WordPress полно вопросов типа "что случилось с моей темой??", когда начинающий разработчик удаляет шаблон footer.php и при этом не закрывает теги, открытые в заголовке. Следите за вашими тегами. Хороший способ найти ошибки на странице — проверить ее в HTML валидаторе.
Таблицы стилей CSS в шаблонах
Вы можете использовать любые HTML и CSS теги и стили, которые захотите. Однако, мы рекомендуем следовать стандартной структуре тем WordPress (см. Site Architecture 1.5). Это сделает ваши темы более понятными для других пользователей.
Сен 2, 2015 - Web-дизайн    No Comments

Отложенная загрузка изображений при помощи JavaScript

Отложенная загрузка изображений. Подгрузка изображений при прокрутке. Как ускорить загрузку сайта, если много фотографий (картинок)?

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

Read more »