Мотиватор — IV часть

мотиватор IV часть

Ну вот мы и добрались таки до дизайна. То есть сегодня разберемся как наш мотиватор вставить в свой шаблон. Причем это можно будет сделать в любом шаблоне WP. Любители Joomla, Drupal, DLE, Simple ит.д. тоже могут спать спокойно и рассчитывать на то, что их мотиватор исправно показывает количество оставшихся дней до определенного события. В нашем случае до апокалипсиса, шкодим мотиватор 4 часть простите до конца этого года.
Итак помучавшись со своим шаблоном примерно полдня, ну может чуть меньше я понял, что стандартными тегами CSS (margin, padding, text-align и т.д.) сделать красиво не получиться. Нужно учитывать длину хедера, его позиционирования, да и еще кучу всяких мелочей из-за которых вся крыша уплывает. Даже position (absolute & relative) и float(left, right) не помогли.
Вернее они работают, но не так как мне нужно. В общем, помучавшись еще пару дней я бы конечно подрихтовал свой хедер и добился нужного результата, но такие танцы с бубном бессмысленно описывать в посте – ведь шаблоны у всех разные, то есть файл css нужно было бы править каждому свой. И в это момент случилось чудо! Шутка, в общем я просто обратил внимание на слои, на оператор CSS – ZINDEX. В этом случае наш мотиватор можно разместить в любом интересующем нас месте, не прибегая к помощи дезигнера. мотиватор 4 часть
Итак чтобы разместить на мотиватор там, где вы его наблюдаете я пошел самым простым путем, даже не стал трогать девственно чистой код файла стилей – STYLE.CSS, который обычно валяется в корне шаблона WP. Я прописал стиль расположения прямо в нашем мотиваторе и вот что из этого вышло –

= "5") and ($day <= "20")) or preg_match("|[056789]$|",$day))  $d = " дней!";

 $nday = "";
 $day = str_split($day);
 foreach ($day as $ind => $vol){
 $nday .= '';
 }

 echo '
До конца марафона
'.$o.$nday.$d.'
'; ?>

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

= "5") and ($day <= "20")) or preg_match("|[056789]$|",$day))  $d = " дней!";
 $nday = "";
 $day = str_split($day);
 foreach ($day as $ind => $vol){
 $nday .= '';
 }
 echo '
До конца марафона
'.$o.$nday.$d.'
'; ?>

Сократить удалось пока одно регулярное выражение PREG_MATCH, если у вас получится еще сократить этот скрипт, то дайте знать. Теперь сохраним наш файл под именем – time.php он понадобится нам для вставки в шаблон. Кстати если у вас нет картинок с цифрами или если вы хотите использовать свои, то нужно будет обозвать все картинки соответственно теми цифрами которые они изображают и поместить их в папку – img, которую тоже нужно будет закачать на ваш хостинг.

мотиватор 4 часть

Ну и теперь наконец разберемся куда сие творение вставлять нужно. А вставлять наше проапгрейденое чудо мы будем в файле – header.php, который находиться в корне вашего шаблона WP. Для этого заходим в админку и смотрим какой шаблон у нас используется. То есть нам нужно название шаблона, обычно так и называется папка самого темплейта.
Допустим, что наш шаблон называется – «bestemplate», тогда мы запускаем свой любимый менеджер по работе с сайтом по протоколу FTP, у меня это FILEZILLA, и конектимся с нашим хостом. мотиватор 4 часть Заходим в папку — wp-content/themes/bestemplate и находим наш файл header.php. Открываем его своим любимым редактором, у меня это NPP и ищем там строки где вставляется название сайта, или логотип,в общем что-то типа —

  

И вставляете туда наш мотиватор, так как показано в этом верхнем файле –


Единственное, о чем нужно помнить – так это о синтаксисе этой нашей команды. То есть если вы вставляете код мотиватора в теги HTML, то строка должна выглядеть именно так как показано выше, а если вы вставите код в одну из уже существующих вставок, то экранирование кода не нужно и тогда вставка будет выглядеть примерно так —


А иначе вместо радостных и восторженных вздохов вы будете получать ошибки движка WP мотиватор 4 часть, который не смог распарсить измененный вами шаблон. Кстати можете поэкспериментировать со вставкой нашего мотиватора в другие страницы темплейта.

!!! Главное положите распакованный файл архива в папку с шаблоном! То есть в корне шаблона после модификации должна появиться папка IMG, если ее конечно там не было до загрузки и файл time.php
Тем у кого другая CMS могу посоветовать вставлять мотиватор также в голову шаблона, главное соблюдать вложенность тегов описанную выше. Ну а если не получается или побаиваетесь трогать свой сайт, но хотите видеть мотиватор у себя, то милости просим в контакты, помогу!

Скачать архив этого урока можно здесь.

Видишь все — не «темный лес», подпишись на RSS!

Ну и чтобы улыбнуть посмотри вот эту м.. вещь —

2 thoughts on “Мотиватор — IV часть

  1. Наконец-то! Наконец выложили как этот ваш мотиватор пристроить на сайте… А то все мучаюсь с первого поста. Я не очень сильна в программ.. как вы говорите в шкодиге и поэтому пыталась тупо копировать код и вставлять его себе в… В общем куда я только его не вставляла, прям как в том анекдоте! Но сегодня вы превзошли самого себя, теперь хоть понятно что с этим добром делать! Буду экспериментировать!

  2. Ну извините seomila, что раньше у вас не получалось, вроде я описывал.., хотя да, описывал в основном сам процесс шкодинга. Но все равно рад за вас, удачи в ваших экспериментах!

Добавить комментарий

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