Блоґ про WordPress

Оформлення власної теми-заглушки

Думаю, багато хто із вас знайомий із корисним плаґіном WP Maintenance Mode. Він дозволяє встановити тему-заглушку, яка коротко проінформує відвідувачів про те, що на сайті/блозі ведеться реконструкція, залишаючи для адміна повний функціонал щодо інших сторінок і публікацій сайту. У стандартному пакеті плаґіну є: кілька шаблонів оформлення; можливість додати таймер зворотнього відліку; можливість підписатись через feedburner або електронну пошту. Також є можливість зробити свою власну сторінку-заглушку і без проблем встановити через настройки плаґіну в адмін-панелі WordPress. Про це в статті і піде мова.

Стандартну конструкцію сторінки-заглушки можна оформити з власними шрифтами, фоном і заголовком. Для цього слід просто створити новий CSS-файл (для цього я використовую Notepad++). Далі необхідно змінити оформлення класів, які використовуються у заглушці, на власні.

Необхідно оформити наступне (для прикладу взято CSS-файл одного з базових шаблонів):

* {
margin:0px;
padding:0px;
border:0px;}

body {
background:#548a32 url('images/bg.jpg') center top no-repeat;
font-family:Arial, Verdana;
color:#fff;
font-size:14px;
padding-top:200px;
width:700px;
margin:0px auto;}

a { color:#fff; text-decoration:none;}

a:hover { color:#ead311;}

#content { position:relative; padding-left:118px;}

#content p {
margin-top:30px;
font-size:18px;
line-height:28px;}

h1 {
font-weight:36px;
font-family:verdana;
font-weight:normal;}

h3 {
color: #8f1218;}

#header { margin-bottom:90px; padding-left:}

div.admin a {
display:block;
width:142px;
text-align:center;
padding-top:20px;
height:32px;
background-image:url('images/button.png');
position:absolute;
right:155px;}

#footer { margin-top:75px; font-size:12px;}

#footer img { margin-bottom:-2px; width:12px; height:12px;}

Клас body відповідає за оформлення фону, там ж прописується фонова картинка.

#content p - тут ви прописуєте розмір і стиль шрифтів.

h1 i h3 - заголовки.

div.admin - кнопка для входу в адмін-панель.

#footer i #footer img - оформлення футера та картинки копірайтів в футері відповідно (їх відображення можна вимкнути у настройках плаґіну в полі Link).

Картинки, які ви будете використовувати в оформленні, просто завантажте на свій хостинг через вкладку "Медіафайли" і пропишіть повне url-посилання на них в CSS-файлі. Наприклад, я використав картинку "title.png", завантажив її у медіафайли.
Після цього я url-посилання на картинку вставляю як background у клас body:

body {
background:#548a32 url('http://notacat.com/wp-content/uploads/title.png') center top no-repeat;
}

Завершивши маніпуляції з кодом, збережіть файл як owntheme.css і завантажте його також на свій хостинг. В ідеалі, краще за допомогою файл-менеджера завантажити його в папку:

/public_html/wp-content/plugins/wp-maintenance-mode/styles

але це не принципово, можна також за допомогою завантаження медіафайлів. Далі слід повне url-посилання вставити у відповідне поле в настройках плаґіну, а в списку Theme вибрати "Own Style".

Після цього зберігаємо настройки і оновлюємо сторінку свого сайту. Все готово.

Якщо ж ви хочете змінити шаблон повністю, чи додати свої класи, то просто необхідно змінити файл site.php.

© «Не Кіт»

Зверніть увагу: ця публікація побачила світ більше року тому, з того часу багато чого могло змінитися ;)
Дмитро Кондрюк
Дмитро Кондрюк
В веб-індустрії з 2003 року. В 2009р. заснував проект Український WordPress (що у подальшому став офіційним сайтом команди локалізації WordPress в Україні). З 2010 року засновник і технічний директор проекту Український хостинг для WordPress (WPHost.me) - повноцінного хостинг-сервісу, максимально оптимізованого на використання CMS WordPress.

Поки всі мовчать...

Поділіться з друзями.

Ми впевнені, що це може бути корисним для інших і для нашого сайту також )