Имахте ли идеята, че WordPress конзола не е много ефективен? Днес ние ще се опитаме да променим това. Разбира се, има различни плъгини, които добавят свои собствени модули за конзолата, но остават различни показатели и етикети, които можете да добавите свой собствен. В тази статия ще ви покажа как можете да добавите свои собствени - напълно персонализирани - конзолни джаджи.
Основна конзола джаджа
Анатомия конзолни джаджи е много проста. Първо, трябва да се използва wp_add_dashboard_widget (функция), за да се регистрирате джаджа в WordPress. След това можете да създадете функция, която обработва изхода на съдържанието. Това е кодът шаблон, който можете да използвате, за да създадете бързо джаджа:
Имайте предвид, че този код трябва да бъде поставен в приставката. Ако искате бързо да го тестват, можете да добавите и код за functions.php файла на вашата тема.
Първата стъпка - това podtseplenie функция, за да wp_dashboard_setup. Съдържанието на тази функция - wp_add_dashboard_widget прост разговор () с три параметъра:
- плужек джаджа
- Заглавие джаджа
- О функция
Втората стъпка - създаването на О функции my_dashboard_widget_display () и се населяват със съдържание.
Заключение приспособления към горната част на конзолата
В някои ситуации, може да се наложи да донесе важна информация и функционалност в горната част на конзолата. WordPress е нищо добро API за извършване на това действие, обаче, някои усилия, може да бъдат реализирани. Трябва да добавим допълнителен код в нашия функция регистрация. Ето целия код на нашия тест джаджа:
Седем допълнителни линии за реконструкцията на прост конзола - много много, но другите методи не го правят. В първия етап, което трябва да направим глобална променлива $ wp_meta_boxes, която съдържа информация за всички регистрирани джаджи. За да се опрости разбирането на кода, добавих джаджи, които се появяват на конзолата, в променливата $ таблото.
В следващата стъпка ние имаме регистриран джаджа от редица приспособления. Тя се съхранява в променливата $ my_widget, защото ние ще трябва да го премахнете от масива, а след това се съберат отново на масива.
В следващата стъпка ние комбинираме съдържание и $ my_widget $ таблото. array_merge () функция, добавя втори масив на първия, така че нашата джаджа в момента е на първо място в нов масив $ sorted_dashboard. В последната стъпка ние променяме оригиналния масив до нова конзола подредени масив.
Добавянето на функционалност
HTML структура
Ние сме създали примера по-горе, като се използва само CSS, без JS. За да направите това, ние използваме следния HTML структура:
Оформена джаджа ще се използва CSS-файл, както и някои вградени стилове, които ще се погрижат за височината и ширината.
Стайлинг колони
Височината на цялата контейнера (.comment-Stat-барове) е фиксиран - 120 пиксела. Колони във височината също да съдържат 120 пиксела. Различна височина на колоната, се постига чрез добавяне на рамки (гранични) с различна височина. По този начин, ние можем да гарантираме, че колоните ще започнат от дъното, както и използването преливане: скрит в контейнера, ние можем да се скрие всичко ненужно.
В стилове се добавя по обичайния начин, като се използва алтернативен връзката:
Моля, имайте предвид, че ние проверяваме променливата куката $, за да сте сигурни, че стилове се използват само на страницата на конзолата, тъй като те не са необходими никъде другаде. Ако добавите код за темата на файла functions.php, ще трябва да използвате get_template_directory_uri () вместо plugins_uri ().
стил лист съдържание ще понижи. Другите стилове са интегрирани:
Изчисляването на височината
лист стил ние добавихме поле (граница) при 1% от всяка страна на колоната. Това означава, че за всяка колона, която трябва имаме 2% по-малко достъпно за разпределение между колоните пространство. По този начин, ако ние използваме 100% за пълната ширина, ние можем да персонализирате ширината на процент от всяка колона:
Сега отиваме към върха. Колоната с най-висока стойност на височина, винаги ще се запълни цялата височина на контейнера. В нашия пример, третата колона (със стойност 40) е най-голямата стойност, така че ще има максимална височина от 120 пиксела. Всяка следващата колона, което ще бъде по-малка стойност, ще добавим горния ръб (горната граница).
Как точно ще се горния ръб, това зависи от съотношението между размера на колоните и най-голямата колона в комплекта. В нашия пример, първата колона - което е точно половината от размера на третата колона. Ето защо, ние ще трябва да добавите отгоре марж от 60 пиксела, точно половината от 120 пиксела. Ето как кодът ще изглежда така:
Показани статични графики
Ако ние комбинираме всички код заедно, ние получаваме комфортен бар диаграма, независимо от факта, че цифрите в него кодиран. Нека да видим:
заключение
Widgets конзола ни позволява да се опрости живота на себе си и на професионалния екип на сайта. В допълнение към статично съдържание, можем да "подправка" неща с CSS и добавят допълнителна функционалност с помощта на JS.
Заедно с получаване на данни от WordPress, може да помислите за трета страна API за данни. Можете да получите статистика от MailChimp, Google Analytics, Twitter и т.н.
Свързани статии