Трохи оптимізував блог…

17.04.2009

  • За численними "просьбамі трудящіхся" прибрав нафіг прелоадінг, який дратував вас фразою "Чекайте, зара видам! :) " і не давав можливості переглядати сайт, доки сторінка не завантажаться повністю разом з усіма зображеннями.
  • Поставив PHP Speedy, правда не зовсім в ньому розібрався. Чомусь основний css-файл він не доклеїв до згенерованої ним компіляції css-файлів плагінів. Плагін Shutter Reloaded чомусь так і не запрацював. Що ж йому заважає?
  • Optimeze DB не захотів працювати. До речі, не тільки у мене... Замість нього база данних в мене тепер автоматично оптимізуватиметься завдяки WP-DBManager
  • Поставив СSS-compress, який зменшує CSS-файли шляхом видалення коментарів в них та переводить їх в однорядний запис.
  • Почав експеримент з кешуванням. За нього в мене тепер відповідає WP-Super-Cashe версії 0.8.9.

Коротше кажучи, навіть не юзачи усякі утиліти для перевірки швидкості завантаження сайту стало видно, що блог почав працювати швидше. Сподіваюсь, відвідувачі зацінять :)

Коментарів : 5

Прелодінг

03.11.2008

Ви вже мабуть помітили, яка прикольна фішечка з'явилася у мене на сайті і нервує вас щоразу, коли ви чекаєте завантаження чергової сторінки. Це зроблено для того, аби приховати від відвідувача процеc підвантаження графіки та формування сторінок.

Зробити це, як завжди, дуже просто :) за помогою невеличкого джава-скрипта:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<script language="javascript" type="text/javascript">
function showpage() {
document.getElementById('loader').style.display = "none";
document.getElementById('main').style.display = "block";
}
</script>
</head>
<body onload="showpage();">
<div style="height:100%; width:100%; display:block;" id="loader">
Сюди тулимо те що має бачити відвідувач в той
момент, коли сторінка ще вантажиться
</div>
<div style="height:100%; width:100%; display:none;" id="main">
Сюди вставляємо власне код сторінки
</div>

</body>
</html>

Коментарів : 13

GET_POST або вивід посту за межами циклу ("The Loop")

09.10.2008

Вчора довго розбирався з такими фунціями WordPress'у, як get_post та get_posts. Зараз коротко розповім про першу у вигляді такої собі нотатки для самого себе :) .

Отже, для того, щоб вивести конкретний пост в будь-якому місці за межами основного циклу, робимо наступне:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
// створюємо змінну, яка міститиме номер (id) нашого посту
$odyn_post_id = 2;

// створюємо змінну, яка створює запит посту з потрібним нам номером
$thys_post_id = get_post($odyn_post_id);

// створюємо змінну, яка міститиме заголовок нашого посту
$zagolovok = $thys_post_id->post_title;

// виводимо заголовок потрібного нам посту через змінну
echo '<br /><h2>';
echo $zagolovok;
echo '</h2>';

?>

Наведений код виведе заголовок запису (посту), id якого - 2.
Для того, аби вивести інші атрибути (дата, автор, сам пост) ...далі »

1 Коментар

"WordPress для чайників" або вчимося створювати плагіни для WordPress

16.09.2008

Ну хоч це і мікроплагін, але це вже не модифікат, а... я дійсно сидів і розбирався, як же ото фунціонують плагіни у вордпресі. Довелось навіть перегляд відеокурсу по php прискорити, аби розібратися з фунціями :)

Тож, цей пост не стільки перезентація плагіну, як нотатка про те, як власноруч створити щось подібне.

Отже, про сам плагін. Називається він "WordPress для чайників" і по суті це є невеличка інструкція по правильному постінгу. Необхідність його створення була викликана тим, що я задовбався пояснювати всім тим, хто вперше бачить wordpress, що і як робити. Особливу увагу я приділяю коректному додаванню тексту в запис (зазвичай люди просто копі-пестом переносять все з ворду або браузера, що неправильно), а в світлі того, що я нещодавно почав роздавати блоги на Природі Україні, то наявність інструкції в адмінці кожного блогу просто життєво необхідна.

Ну і, головне, мені вже дуже хотілося розібратися з фунціонуванням плагінів та створити щось від себе.

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

1
2
3
4
5
6
7
8
9
<?php
/*
Plugin Name:  WordPress для чайників
Plugin URI: http://www.mixa-blog.org.ua/wp-dummies/
Description: Інструкція по правильному поводженню з WordPress для тих, хто щойно приєднався :) Як правильно додати публікацію та налаштувати свій блог.
Author: Mixa
Version: 0.1
Author URI: http://www.mixa-blog.org.ua/
*/

Далі у нас іде функція, яка і виконує головне завдання - містить наш контент з інструкцією в адмінці:

1
2
3
4
5
6
7
8
9
function instrtext()
{
echo < <<text
<div class="wrap">
<h2>Як правильно додати публікацію та налаштувати свій блог</h2>
<p>Bla-bla-bla</p>

TEXT;
}

Як ви вже зрозуміли, замість тестового тексту можна підставити що завгодно: власну інструкцію, наприклад. Можна просто вставити фрейм і виводити ...далі »

1 Коментар

Class і ID

07.07.2008

Бліна, я тільки щойно, завершивши верстати черговий дизайн і вирішивши перевірити валідність шаблону, зрозумів різницю між ID та Сlass. Проблема не велика, але всеодно для очищення совісті доведеться порпатися заново у всіх темках і переписувати "#" на "." - дивись, тоді й може темки мої будуть повністю валідними, бо зара основну частину репортів займають повідомлення що айді такий-то вже заюзаний раніше...

Коментарів : 6

В процесі линьки

30.04.2008

Працюю над створенням власної теми дизайну для WordPress. На відміну від усіх попередніх випадків, це не моддінг чужих робіт, а дійсно моя власна тема, написана практично з нуля. Звичайно, десь щось я підглядав (головним чином у підручник по CSS), але це справді буде повністю мною створений шаблон дизайну і я зможу з легкістю його модифікувати аж до повної зміни усього вигляду, а також використовувати данний каркас для написання інших тем. Поки що все виглядає десь ось так:

Приймається конструктивна критика, поради і побажання :)

До речі, дуже допоміг плагін Theme-Tester, за допомогою якого адмін може бачити сайт в одному дизайні, а відвідувачі - в іншому.

А ще мене сьогодні зробили ресселером одного чудового хостингу, так що, цілком можливо, мій блог скоро переїде. А кому потрібен надійний хостінг - звертайтеся, коли я навчуся рулити серваком :)

Ну всьо, через пару годин вирушаю на Херсонщину, побажайте мені сонячної погоди! :)

Коментарів : 6

Кожній сторінці – свій власний сайдбар/хедер/дизайн!

26.01.2008

Не можу сказати, що я розбираюся в php, але принцип його функціонування мені зрозумілі. Принаймні в елементарних речах. Але за допомогою цих самих елементарних речей можна творити справжні дива!

Ви коли-небудь хотіли, аби ваш сайдбар виглядав неодинаково на всіх сторінках (наприклад, я не бачу сенсу показувати блок "Останні повідомлення" на головній сторінці, де й так видно останні публікації у всій красі - а от на сторінці окремого посту цей блок буде дуже доречним і дозволить вам зацікавити відвідувача і примусить побігати по вашому блогові. Але це тіки приклад - насправді використовувати прийом різних сайдбарів можна у безкінечній кількості варінтів - так, як вам буде зручно... ), чи, може, ви би хотіли щоб кожна категорія ваших записів мала тематичну картинку в шапці, а то і повністю інший дизайн? Бувало таке? Тоді читайте далі!

Цей спосіб придумав не я. Це звичана річ в php, але й в даному випадку я підгледів цю фішку у Макса в одній з його робіт.

А насправді все дуже просто:

1. Беремо файлик вашої теми дизайну sidebar.php (це в більшості випадків, але в деяких випадках він може називатися по-іншому. Але якщо ви не можете знайти, де заховано ваш сайдбар, то далі читати немає сенсу :( )і копіюємо його вміст до блокнота. А на місце, де був код сайдбар, вставляємо:

1
2
3
4
5
6
7
8
9
<?php if ( is_page('home') ) require('sidebar-default.php');
elseif ( is_page('about') ) require('sidebar-about.php');
elseif ( is_category('news') ) require('sidebar-news');
elseif ( is_category() ) require('sidebar-default');
# elseif ( is_archive() ) require('sidebar-default');
# elseif ( is_single() ) require('sidebar-default');
# elseif ( is_page() ) require('sidebar-default');
# elseif ( is_tag() ) require('sidebar-default');
else require('sidebar-default'); ?>

2. Зберігаємо цей файл.
3. Код нашого колишкього сайбару зберігаємо як файл sidebar-default.php і заливаємо до папки нашої теми дизайну.
4. А тепер думаємо, де і який сайдбар ми хочемо показувати. Наприклад, ...далі »

Коментарів : 12

Page Rank та інші фігні

12.01.2008

Я раніше не переймався такими штуками, як Page Rank, усілякі ТиЦ'и та інше, можна сказати, мене навіть вернуло від усих цих SEOшних примочок. Але вкінці-кінців стало цікаво. Тепер в моєму броузері видно усі показники сайту, що переглядаєтья. І сьогодні, коли я помітив, що два моїх сайти втратили позицію Page Rank з 4 до 2 я навіть трохи засумував... Чого б це? І яким макаром це сталося?

А ще, лайтбокс, який я вже встановлюю усюди у вигляді плагіну.... На одному з сайтів він, по-переше, некоректно відображається, коли відкриває картинку у повному розмірі - зліва чогось якийсь пустий простів отримується, а, по-друге, чогось вирішив "підхвачувати" усі картинки, навіть ті, для яких не задано rel="lightbox"... Хтось може мені щось пояснити?

1 Коментар

Елементи з заокругленнями без використання графіки

05.01.2008

Зара дуже модно (та до чого тут мода - це просто гарно!) використовувати в оформленні різні заокруглення. І, як виявляється, можна використовувати їх будь-де, не вдаваючись до графіки, відповідно, не треба паритись, чи не з'їде шосьтамкудисьнетуди в браузері всіх часів і народів - інтернет експлорері :)
Цей приклад побудовано на основі методики, що застовується в гуглівській пошті.
Отже, першою справою додаємо стилі:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* стилі для закругленнь */

.inner-box {
padding:1em;
}

.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}

.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

/*

можливі комбінації

r3 r1 r1 зверху
r1 r1 r3 знизу

r5 r3 r2 r1 r1 зверху
r1 r1 r2 r3 r5 знизу

r10 r7 r5 r4 r3 r2 r2 r1 r1 r1 зверху
r1 r1 r1 r2 r2 r3 r4 r5 r7 r10 знизу

однак не слід обмежуватись лише цими варіантами,

можливі і інші комбінації та багато інших ефектів.

*/

#rounded-box-3, #rounded-box-5, #rounded-box-10 { margin:1em; }

.inner-box, b { background-color: #43CD80; }

/* зменшуємо відступи по мірі збільшення радіусу заокруглення */
#rounded-box-3 .inner-box { padding: 1em;}
#rounded-box-5 .inner-box { padding: 0.7em 1em;}
#rounded-box-10 .inner-box { padding: 0.4em 1em;}
/* кінець стилів для заокруглень */

Я думаю, якщо ви вже взялися це робити, то зможете і без моїх підказок знайти місце, в якому можна задати власний колір фону :)
А далі - все просто: дивимося в стилях місце, позначене підказкою "можливі комбінації", відповідно, оточуємо наш контент відповідною кількістю div'iв з відповідними назвами. В результаті експериментів отримаємо різні кути заокруглення. Наприклад:

1
2
3
<div id="rounded-box-10">
<b class="r10"></b><b class="r7"></b><b class="r5"></b><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b><b class="r1"></b><div class="inner-box">Наш контент<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dolor diam, condimentum sed, rhoncus in, adipiscing ut, pede. Mauris blandit fringilla quam. Praesent rutrum semper mi. Nam vulputate. Integer eu pede a turpis hendrerit placerat. Nam ac dolor mollis arcu gravida blandit. In a metus. Mauris nulla ipsum, hendrerit ac, porta id, tincidunt ac, enim. Morbi blandit pede non mi. In convallis eros vel leo.</div><b class="r1"></b><b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b><b class="r5"></b><b class="r7"></b><b class="r10"></b>
</div>

Отримаємо:

От і все! Єдине, що не завжди можна додати цей код з дівами безпосередньо в пост, але для використання в сайдбарі чи оформлення будь-яких елементів теми дизайну немає ніяких обмежень, окрім вашої фантазії!

Коментарів : 6

Деревовидне меню для сайту

22.09.2007

menu1.jpgМій блог очікують невеличкі зміни. Головне - переробити повністю сайдбар: зробити деревовидне меню, що могло б займати менше місця, а також усю іншу інфу поприховувати в скриптики, що при натисненні плавно розкривають зміст того чи іншого блоку. Почав з першого пункту, а не так легко це виявилося. Вирішив не писати все самостійно, а використати якусь із прог. Зупинився на Sothink Tree Menu і все чудово виходило... аж поки не встанов готове меню на сайт. І тут я зрозумів, що тріальна версія - на те вона й тріальна, щоб можна було лише спробувати можливості програми. І, якщо на компі в інтерфейсі проги все працювало нормально, то на сайті почалися глюки з дизайном і... меню зпавантажувалося лише на індексій сторінці - на інших працювати відмовлялося...

Тож, я продовжую пошуки виходу із ситуації. Може хто підкаже як бути?

...далі »

Коментарів : 6