13.08.2013      644      0
 

Как дать посетителям Вашего блога возможность менять оформление сайта?

Как то для одного из своих проектов я озадачился необходимостью предоставить любому посетителю менять внешний…


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

  1. style.css — основной файл стилей, где прописывались размеры шрифтов, поля, отступы, выравнивание и тому подобное
  2. stylewp-black.css — дополнительный файл для оформления темы в тёмных тонах, где прописывался фоновый цвет, фоновые изображения, цвета текста и ссылок
  3. stylewp-white.css — дополнительный файл для оформления темы в светлых тонах, где аналогично предыдущему файлу прописывались цвета фона и текста

То есть мы имеем файл основу — где прописаны все общие для обоих вариантов оформления параметры, и два файла, в которых прописаны те параметры, которые будут отличаться.

После написания стилей оформления, мы прописываем в файле header.php нашей темы оформления (до закрывающего тега ) следующие строки:





Где обращаем внимание на тег title=»наименование цветовой схемы». Далее в месте шаблона, где мы хотим вывести список возможных для использования цветовых схем, вставляем такой код:

Выберите цвет оформления

Где onclick=»setActiveStyleSheet(‘black’) и onclick=»setActiveStyleSheet(‘white’) — black и white — текст аналогичный тексту в теге title, вставляемом ранее в header.php

Последний шаг — создаём в папке темы оформления папку javascript и помещаем в неё файл styleswitcher.js — скачать его можно здесь

В итоге получаем что то вроде того — Пример


Об авторе: Алексей

Меня зовут Алексей, мне 39 лет, и вот уже десять лет как одним из моих многочисленных увлечений стало создание и продвижение сайтов. Подчёркиваю, что это именно хобби, а не основная моя работа. Тем не менее, я никогда не упускал возможности заработать на своих увлечениях. На страницах этого сайта, вы найдёте как множество моих наработок в сфере сайтостроения, так и полезную информацию о продвижении готовых сайтов. Если вы любознательны и любите узнавать новое, мои рекомендации помогут вам освоиться в непростом деле создания сайтов и их продвижения. Ну а если вы слишком далеки от html, css и прочих web-штучек, вы всегда можете воспользоваться моими услугами как вебразработчика, так и сеошника. Желаю Вам с пользой провести время на моём сайте!

Ваш комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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