В този туториъл ще покажа може би най-лесния начин за добавяне на даунлоуд бутон в публикация на WordPress, така че вместо да оставяте разни текстови линкове към важен материал, ще може да покажете на потребителя къде трябва да кликне ясно и точно, за да свали пор… ъъъ… „онази полезна програмка“. За целта ще ползваме така наречените Custom Fields, които се използват за дисплейването на допълнителна информация a.k.a metadata. Какво ви е неоходимо? Ами готов, нарисуван бутон, познания по php/html/css (макар че може да се мине и без тях ако копирате без му мислите много), една бира за смелост и 15 минути от ценното ви време. Между другото ето и моя бутон, който нарисувах за случая и мисля известно време да ползвам в блога ми:
И така, приемам, че вече сте нарисували вашия убер-як даунлоуд бутон и сте готови да продължим с въпросните Custom Fields, за които искам да направя няколко разяснения. Какво представляват и как работят те с две думи? Под текстовия едитор, с който пишем всяка една публикация в WordPress има няколко допълнителни „екстри“, една от които е Custom Fields. Съставена е от ключ (key) и стойност (value), която ключът присвоява. Ключът се въвежда в полето Name, а стойността по подразбиране в полето Value. Ако напишете в полето Name – „В момента пия:“, а полето Value – „боза“ и натиснете бутона, то за конкретния пост ще се съхрани информацията, че пиете боза, но обърнете внимание, че тя няма да е видима никъде все още. Веднъж добавен key-ът вече е достъпен за избор от dropdown меню и може да се ползва в други постове.
За да боравим с Custom Fields имаме на разположение няколко функции, които са споменати в ръководството (add_post_meta(), update_post_meta(), get_post_custom() и т.н.). Всеки който има интерес може да си прочете за тях, но ние ще ползваме в случая get_post_meta(), която връща стойностите на конкретен key. Т.е. каква е нашата цел – ще сложим няколко реда php код, съдържащ този key и когато ни потрябва ще го викаме, изписвайки името му в полето Name на Custom Fields. Така ще имаме бутон даунлоуд само когато ние пожелаем.
В примера, който ще дам да кажем ще направим така, че бутонът да се изобразява на индекс страницата на даден пост и то след съдържанието му. За целта влезте в папката на темата, която ползвате и от нея отворете index.php (/wp-content/themes/темата_която_ползвате/index.php) и намерете реда, който най-вероятно изглежда така:
<?php the_content('<p>Read the rest of this entry »</p>'); ?>
Под него копирайте следния код:
<?php $dl_btn = get_post_meta($post->ID, 'download_button', true);
if(!empty($dl_btn)) { ?>
<a href="<?php echo $dl_btn; ?>" class="dl_btn">Download</a>
<?php } ?>
В общи линии какво правим. Взимаме това, което връща функцията get_post_meta и го запазваме в променлива $dl_btn. Проверяваме дали тази променлива има зачислена стойност и ако има, тогава отпечатваме HTML кода на бутона. Ако няма стойност, не извършваме никакво действие и бутона за даунлоуд не се отпечатва на екрана. В конкретния случай, аз използвам CSS стил, за да оформя визуално HTML елемента, който ще съдържа картинката на бутона, а самата картинка я закачам като background към елемента. Този начин е за предпочитане през използването на <img /> тага, защото променяйки CSS стилът, промените ще се отразят на всички елементи, използващи този стил. Ако решите да използвате този подход, по-долу ще откриете CSS кода, който съм ползвал аз.
a.dl_btn {
background: url(images/download_btn.png) no-repeat left top; /* Напишете вашия път до картинката */
display: block;
width: 130px; /* Зависи от ширината на бутона */
height: 34px; /* Зависи от височината на бутона */
margin: 20px auto 0;
font-size: 0; /* Този ред и следващия са, за да се погрижим текста в таг <а></а> да не се вижда */
text-indent: -9999px;
}
След като сте готови с промените, е време да отидем в желания пост и да добавим нов Custom Field със следните данни:
Сега вече имате собствен Download бутон!
Надявам се урока да ви е бил полезен и да сте разбрали целия процес. Наистина е елементарно и ако прескачате допълнителните обяснения, които съм написал с чисто информативна цел, то всичко става точно за 5 минути. Ако искате този бутон да се вижда на всяка страница, то трябва да копирате php кода по-горе във файловете single.php, page.php и archive.php, които се намират в главната директория на темата, която ползвате. Може да видите бутона в действие тук. Единственият минус на тази техника е, че имаме доста ограничени позиции за показване на бутона, т.е. няма как в един пост той да бъде горе, а в друг долу, но това не е кой знае колко фатално.
P.S. Може да има и по-хитър начин за цялото нещо, но аз засега не съм открил такъв, а и знанията ми с php се простират дотук. Ако имате критика, предложение или въпрос – коментирайте на воля!
10×2: Васко за търпението с онзи проблем ;)