Category Archives: Промени в Source кода

Промяна #16

Както споменах в предния пост – “очаквайте още нови неща тея дни”. И ето, че се появи новия панел със бутони за споделяни

Задвижван само и изцяло от CSS3(пак за тези които не ползват браузъри, които да поддържат CSS3 – сори :)), елегантен, не-натрапващ се и в същото време лесно достъпен.

Първоначално смятах да го анимирам с jQuery(JavaScript библиотека), обаче в последствие реших да се възползвам(пък и да проверя) предимствата на CSS3. Оказа се че в общи линии анимациите стават изключително лесно което е голям плюс.

Ето кода който зарежда бутоните: 


<div id="mw_custom_sharing"></div>
// функцията която зарежда самите бутони - във functions.php
function render_floating_social_buttons() {
$url = urlencode(curPageURL()); ?&gt; // тук се взима и енкоудва URL-то на сегащната страница
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<div class="alignleft fb-share-btn"><a type="box_count" name="fb_share"></a></div>

&nbsp;

<div class="alignleft google-plusone"></div>

<script type="text/javascript">// <![CDATA[
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

// ]]></script>
<a class="twitter-share-button" href="http://twitter.com/share" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<?php }

И съответно CSS-a : 

 #mw_custom_sharing { width: 70px; height: 40px; overflow: hidden; padding: 15px 15px 15px 0; position: fixed; left: -75px; top: 130px; z-index: 100; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; background: url(images/background.gif) repeat 0 0; } #mw_custom_sharing:hover { left: 0; height: auto; min-height: 330px !important; } /* това селектира всички елементи, които са директни наследници на #mw_custom_sharing, и не са script елемент И нямат id="fb-root" */ #mw_custom_sharing --> *:not(script):not(#fb-root) {
padding-bottom: 15px;
margin: 0 auto 15px auto !important;
text-align: center;
border-bottom: 1px solid #ccc;
width: 70px;
display: block;
}
/* за FB Share бутона трябва малко по-специфичен стил, за да се центрира */
#mw_custom_sharing .fb-share-btn .fb_share_count_wrapper { float: none; text-align: center; }

/* Това избира последните два директни наследника на #mw_custom_sharing, които не са script елемент и ...
Селектирам последните два, защото знам че почти винаги последния елемент е script */
body #mw_custom_sharing > :nth-last-child(-n+2):not(script):not(#fb-root) {
padding-bottom: 0 !important;
margin: 0 auto 0 auto !important;
border-bottom: none !important;
}

Промени бяха направени по следните файлове:

  • header.php
  • functions.php
  • style.css

Линк към ревизията: Цък

Малко освежаване :)

Иии след като се преместих на новия домейн, нещо ме позасърбяха ръцете(пък и според Google Analytics, посещенията през последната седмица са нараснали леко :)) ) и реших да почовъркам пак малко темата.

В общи линии това което се промени за посетителите са дребни детайли по дизайна – заоблени ръбове и елегантни сенки

Това което обаче не се вижда с първото посещение е, че сенките променят цвета си според часа от денонощието. Като цяло съм го разделил на 4 части – нощ(24-6), сутрин(6-12), ден(12-18) и вечер(18-24), като през всяка от четирите части цвета на сенките е различен.

ПП: Ако сте от онзи процент хора, които използват стар браузър(IE8 или по-стар, Firefox под 3.5, за другите не съм сигурен ) има доста голям шанс да не виждате гореспоменатите закръглени ръбове и сенки. Ако е така – просто си обновете браузъра – най-малкото ще имате по-приятно браузване

Yellow-Orange Flower

Промяна #12

В последната ревизия бяха направени промени по файла :

  • shortcodes.php

Както обещах, скрипта за промяна на размера на изображения не остана за дълго неизползван – сами може да видите резултатите из блога…

Като цяло добавих нов кратък код, на който може да пуснете само линк към оригиналното изображение и той ще ви върне снимка с ширина 610 пиксела, а височината ще бъде автоматично изчислена в зависимост от пропорцията височина/ширина. Тя ще бъде центрирана и ще представлява линк към оригиналното изображение. За по-подробно обяснение на краткия код, както и самия код който стои зад него, можете да прочетете в Кратък код за преоразмеряване на изображения.

Линк към ревизията

Промяна #11

След голямо затишие по развитието на темата, се натрупаха някои идеи, които реших да осъществя

В последната ревизия бяха направени промени по файла :

  • functions.php

Бяха добавени и няколко нови директории:

  • /lib
    • /lib/temp
    • /lib/cache

, както и следните файлове:

  • shortcodes.php
  • timthumb.php

Новата директория( lib ) беше добавена, за да има отделно място за допълнителните файлове на темата. В нея се премести файла с widget-ите, новия файл в който са всички кратки кодове( shortcodes.php ), както и скрипта за променяне на размера на изображения( timthumb.php) – все още не се използва, но при следващата ревизия ще влезе в употреба :). Директориите cache и temp се използват от timthumb.

Промените по functions.php, освновно отразиха промените в структурата – премахната беше функцията за краткия код, и беше добавена референция към файла  shortcodes.php с php функцията include_once()

Линк към ревизията

Промяна #9

Току що направих поредната ревизия. В нея бяха направени минимални( но доста значими ) промени по следните файлове :

  • header.php
  • style.css

Промяната се състои в добавянето на линк, който води към адмнистраторския панел( /wp-admin ) и по този начин премахвам излишния widget “Служебни”, който ненужно “затормозява”(по мое мнение) посетителите и като цяло не дава полезна информация( при положение, че имам собствен widget за rss feed-овете ). Линка е на изключително удобно място и е практически “невидим”, поне докато не го посочите :))) Не, това не е нито Java Script, нито CSS, тук става дума за стария и добър HTML и по-точно Image Map( или карта на изображение ). Когато цъкнете върху луната на картинката по-горе, ще бъдете препратени към https://themoonwatch.com/wp-admin/ , което от своя страна ще ви препрати към страницата за вписване, понеже не сте логнати.

Изключително просто решение, на което винаги много се кефя Обикновенния потребител не вижда нещо, което не го интересува, а аз си имам бърз и удобен достъп до администрацията на сайта.

Промяна #8

В тази ревизия, бяха направени промени по следните файлове :

  • functions.php
  • theme-widgets.php

Добавена беше функцията “get_exclude_list_from_names( $exclude )“, която премахна повтарящия се код в theme-widgets.php . Тази функция приема променлива( $exclude ), съдържаща текст. Ако променливата не е празна, се прави опит тази променлива да се раздели на масив, като за разделител се взема “,”. Създава се променлива( $exc ), със стойност “exclude=”. След това се прави цикъл, който обикаля всеки елемент на масива/променливата $exclude . За всеки елемент към $exc се добавя ID на категория със същото име( ако няма такава, функцията get_cat_ID() връща 0 ), последвана от “,” . Накрая функцията връща $exc. По този начин, потребителя може да добави списък на имената( вместо ID-та ) на категориите, които не иска да се показват от Widget-a, като всяко име е разделено само от “,”.

Промяна #7

В категорията Промени в Source кода ще публикувам всяка промяна която правя по кода на темата, и която качвам в Repository-то.

Последната промяна е #7.

В нея беше добавен Widget-a( Джаджа, ако ползвате българската версия на WordPress ) Custom – List Categories.

Този Widget позволява да покажете в който и да е Sidebar следната информация :

  • Линк към основния Feed на блога ви
  • Списък с категориите
    • Определени категории могат да не се показват( има поле, в което тези категории се отделят със “,” ). Името на всяка категория води към архива за тази категория.
    • За всяка категория може да се показват две допълнителни връзки :
      1. Email Subscribtion( по този начин, всеки който се регистрира в този списък ще получава обновявания на електронната си поща )
      2. Feed( води към Feed-a за тази категория )

Бяха направени промени по следните файлове :

  • style.css
  • functions.php

Следния файл беше добавен : theme-widgets.php