Как да използвате таблици с данни в WordPress – творчески начини за изграждане на HTML таблици, изпълнени с данни

Как да използвате таблици с данни в WordPress – творчески начини за изграждане на HTML таблици, изпълнени с данни

Как да използвате таблици с данни в WordPress – творчески начини за изграждане на HTML таблици, изпълнени с данни
СОДЕРЖАНИЕ
02 июня 2020

Таблиците никога не са били нещо, в което WordPress е особено добър. По принцип, ако искате да покажете таблици с данни в WordPress, най-вероятно ще изработите цялата презентация на ръка – използвайки суров HTML и CSS, за да изглежда всичко добре.


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

Както и да е, тъй като таблиците са нещо, което използваме много в публикациите си тук в CodeinWP, искам да споделя някои от нашите най-добри стратегии с вас днес.

В това ръководство ще представя няколко креативни идеи за това как можете да използвате HTML таблици / таблици с данни в WordPress, да ги накарате да изглеждат девствени ✨ и също така да се уверите, че те са оптимизирани за мобилни устройства и са SEO оптимизирани едновременно..
Как да използвате таблици с данни в WordPress

Нашият тристепенен подход към таблиците с данни в WordPress

За да обобщим бързо нашия подход, работихме с таблици с данни в WordPress по три различни начина:

(А) Използване на прости отзивчиви и добре изглеждащи таблици за представяне на основни данни и улесняване на смилането на части от нашите публикации.

(Б) Използване на нещо, което може да се обади "таблици със средно ниво" за да се даде възможност за някои допълнителни функции като сортиране на потребители и подчертаване на реда при задържане на мишката.

Пример на живо:

Хостинг компанияРейтинг / 5Последване ПопулярностМаркет Популярност (Alexa)
GoDaddy3.50.41223
Bluehost3.30.261780
HostGator3.70.301872
WPEngine4.40.374065
SiteGround4.61.005708
DreamHost4.10.2210030
A2 хостинг3.80.1612709
Cloudways4.50.3918544
Kinsta4.80.2523350
маховик4.60.1834689

От нашето хостинг проучване

(° С) Използване на автоматично освежаващи таблици, които позволяват много по-усъвършенствани вътрешни работи, които не са съвсем видими за потребителя на фронта. Например таблицата тук е изградена на базата на Google Sheet и се актуализира автоматично (тоест всеки път, когато актуализираме листа, таблицата се актуализира и).

Пример:демонстрация на хост на визуализатора

Ето как можете да подражавате на нашия подход и да си изградите няколко страхотни таблици с данни в WordPress:

Стратегия №1: Използвайте Visualizer, за да оживите вашите таблици

Да започнем с големи с вероятно най-модерния подход на групата! Тогава ще направим нещата по-прости, докато продължаваме надолу по този пост.

Visualizer е един от нашите собствени приставки и основният инструмент, за да направим тази първа стратегия за обработка на таблици с данни в WordPress.

  • ��️ Какво е Visualizer? Това е приставка, която ви позволява да създавате диаграми, графики и таблици и след това да ги включвате в публикациите си в блога чрез къси кодове или блокове. Той е лесен за използване, ако се нуждаете само от основния набор от функции, но също така е много мощен, ако искате да поразровите малко под капака.

Едно от готините неща на Visualizer е, че можете да зареждате данните си – както за таблици, така и диаграми – от множество източници. Когато създавате нова таблица, например, можете да импортирате от:

  • CSV файл,
  • URL адрес (включително Google Таблици),
  • друга диаграма,
  • WordPress (чрез създаване на филтри / работни потоци, които след това разглеждате базата данни на WordPress и извеждате желаните от вас данни),
  • директно базата данни (използвайки сурови SQL заявки),
  • плюс, можете също да въвеждате данни ръчно.


Визуализатор: Мениджър на таблици и графики за WordPress

Автор (и): Themeisle


90% Ratings


40000 + инсталирания


WP 3.5 + Изисква

Повече информация

visualizer.zip

Текуща версия: 3.4.3

Последна актуализация: 4 май 2020 г.


90% Ratings


40000 + инсталирания


WP 3.5 + Изисква

Страница на приставката за WordPress.org


Визуализатор: Мениджър на таблици и графики за WordPress

Добре, така че къде може да се оживеят вашите маси да оживеят тук?

Най-трудното за таблиците, като цяло, е, че създаването им на ръка отнема основно същото време, както и актуализирането им по-късно. Ние по-скоро правим таблиците еднократна задача и автоматично се актуализира всичко.

С Visualizer можете да изберете да получите данни за вашата таблица от URL и след това да настроите импортирането да се повтаря на всеки час / 12 часа / ден / три дни.

Това ефективно означава, че получавате таблица, която се обновява автоматично въз основа на промените на източника. Прочетете: няма нужда да се връщате към него и да го актуализирате на ръка.

Ето четири творчески начина, по които можете да се възползвате от това:

Актуализирайте (автоматично) вашите казуси или публикации за анализи

Бяхме много на пазара за хостинг на WordPress. Имаме редица публикации по темата и повечето от тях изискват текущи актуализации.

Една от версиите на нашето основно хостинг сравнение включва жива таблица, която подчертава времето за зареждане на представените хостове. Изглежда така (таблица на живо):

.visualizer-41792oddTableRow {фон-цвят: #eaeaea! важно;}

(Може да не го видите в действие, ако отидете на този пост сега; ние го сменяме доста често, като тестваме много неща.)

Цялата тази таблица се изтегля автоматично от Google Таблици. Дори логотипите и връзките се съхраняват в Google Sheets (като суров HTML). Всеки път, когато актуализираме времената на зареждане, те също се актуализират в таблицата. Да не говорим, потребителят може да сортира таблицата.

Настройването на това изобщо не е трудно:

1. Подгответе вашите неща в Google SheetStandard. Ето пример:

пример на лист

Тогава, "публикувайте го в интернет" Според това ръководство.
2. Създайте таблица в VisualizerFirst, инсталирайте Visualizer плъгин, духа!

Отидете на Медия → Библиотека на визуализаторите и кликнете върху Добави нов. избирам маса.

От прозореца за настройка изберете Импортиране на данни от URL, Влез в График на импортиране и след това въведете URL адреса на импортирането и графика. Така:

график импортиране

Запазете таблицата.
3. Добавете таблицата към публикация / страница Включете таблицата чрез кратък код или с помощта на редактора на блокове. Това е, имате таблици с данни в WordPress!

Отново с тази настройка можете автоматично да получавате данни за таблици и след това автоматично да актуализирате тези таблици.

Актуализирайте няколко таблици в няколко публикации (автоматично)

Това е свързано с предишния сценарий, но ъгълът е малко по-различен.

По принцип нищо не ви спира да използвате същия Google Sheet като източника на данни за множество таблици.

Това означава, че можете да включите подобни таблици в множество публикации / страници и да не се притеснявате, че с течение на времето те ще изчезнат (например, ще актуализирате едната, но забравите да актуализирате другата и т.н.).

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

Актуализирайте (автоматично) вашите номера на трафика / потребителите / продажбите

Има тенденция сред уеб бизнесите да споделят на своите уебсайтове различни числа / показатели като трафик, продажби, брой на обслужваните потребители и т.н..

Не всички обаче искат да вграждат външни услуги и по този начин да не могат да ги модерират по никакъв начин.

В идеалния случай, дори ако сте много прозрачни, все още не искате да се събуждате и да разберете, че вграждане от вашата количка за пазаруване или инструмент за трафик показва огромен спад – докато заглавието ви все още може да каже "виж колко добре се справяме!"

Ако добавите още един слой и импортирате първо данните в Google Sheet, тогава можете да модерирате всички промени, преди те да влязат в таблицата за трафик / продажби и да отидете на живо на сайта.

Настройката е същата като в предишните сценарии. Просто създайте нов Google Sheet, импортирайте или въведете вашите номера и след това го свържете към таблица или диаграма на Visualizer.

Заявете вашата база данни (автоматично)

Visualizer има още една готина функция в ръкава си; той може да импортира данни от таблицата направо от вашата база данни на WordPress чрез сурова SQL заявка.

Доста усъвършенствани неща, да, но също така ви дава много възможности, ако желаете да експериментирате.

Няколко бързи идеи:

Първо, можете лесно да покажете най-коментираните си публикации. Можете да използвате такъв списък не само в докладите за прозрачност, но и на страницата си с архиви. Пример:

коментира

За да създадете такава таблица, просто отидете във Visualizer, създайте нова таблица и изберете Импортиране от база данни.

В прозореца на заявките можете да поставите нещо подобно:

ИЗБЕРЕТЕ post_title AS Post, COUNT (DISTINCT c.comment_ID) КАК Коментари ОТ wp_posts p LEFT JOIN wp_comments c ON p.id = c.comment_post_ID ГРУПА ПО p.ID ПОРЪЧАЙТЕ ОТ КОМЕНТАРИ DESC ОГРАНИЧЕНИЕ 10

Това ще покаже таблица с вашите топ 10 най-коментирани публикации.

Можете да усложните заявката, за да получите и URL адреса, така че да можете да направите тези заглавия на публикации живи. Това е само пример. Ето някои други неща, които можете да направите:

  • избройте всички ваши публикации от определена категория или написани от автор
  • разгледайте таблици, които другите плъгини използват за съхраняване на своите данни, извличане на съответните данни от тях
  • покажете най-продаваните си продукти от WooCommerce, заедно с броя на продажбите, връзките, цените, каквото друго желаете
  • направете същото с Easy Digital Downloads; Ето няколко готови запитвания

Това е така, когато става въпрос Visualizer и как го използваме Но има и други решения, ако не се нуждаете от този вид напреднала автоматизация:

Използвайте TablePress за надеждно сортиране и редактиране на таблици

Ние също сме големи фенове на TablePress и го използваме в редица наши публикации.

Например, тук има голяма таблица – списък на 100-те най-големи играчи на пазара на теми в WordPress. Преглед:

Пример за директория с теми

Това, което харесваме при TablePress е, че можем лесно да подреждаме редовете, да скриваме редове, да дублираме редове, а също така да даваме на потребителя някои контроли за сортиране на таблицата.

Например за тази конкретна таблица имаме още колони в задния прозорец, които не показваме (червените). TablePress не ни принуждава да ги изтрием – можем просто да ги скрием от показване.

скрита маса

Използвайте кратки кодове Ultimate, за да сводствате HTML таблиците си

лично, Кратки кодове Ultimate (SU) е един от любимите ми плъгини за всички времена.

Сред многобройните си късокоди, има и един, който можете да използвате, за да направите стандартните си HTML таблици да изглеждат много по-хубави.

Ето таблица в нашата публикация, сравняваща най-добрите VPN услуги:

су маса

Той е създаден чрез суров HTML и след това просто е добавен SU кратък код около него. Този:

[su_table] [/ su_table]

Всички стилове на редове и рамки, които виждате, са SU.

С други думи, ако темата ви няма особено приятен CSS за обработка на таблици, използвайте SU.

�� Забележка; и трите решения, за които говори в тази публикация – Visualizer, TablePress и SU, могат да извеждат таблици, които са готови за мобилни и отзивчиви.

заключение

Съветвам ви да експериментирате с тези три приставки. Ние обичаме Visualizer, тъй като това е наше собствено творение, но трябва да признаем, че другите двама са доста спретнати и за конкретни задачи!


Визуализатор: Мениджър на таблици и графики за WordPress

Автор (и): Themeisle


90% Ratings


40000 + инсталирания


WP 3.5 + Изисква

Повече информация

visualizer.zip

Текуща версия: 3.4.3

Последна актуализация: 4 май 2020 г.


90% Ratings


40000 + инсталирания


WP 3.5 + Изисква

Страница на приставката за WordPress.org


Визуализатор: Мениджър на таблици и графики за WordPress


TablePress

Автор (и): Тобиас Батхе


100% Ratings


800000 + инсталирания


WP 5.3 + Изисква

Повече информация

tablepress.1.11.zip

Текуща версия: 1.11

Последна актуализация: 1 април 2020 г.


100% Ratings


800000 + инсталирания


WP 5.3 + Изисква

Страница на приставката за WordPress.org


TablePress


WordPress Plugin за кратки кодове – кратки кодове Ultimate

Автор (и): Владимир Анохин


98% Ratings


800000 + инсталирания


WP 4.6 + Изисква

Повече информация

shortcodes-ultimate.5.9.0.zip

Текуща версия: 5.9.0

Последна актуализация: 24 май 2020 г.


98% Ratings


800000 + инсталирания


WP 4.6 + Изисква

Страница на приставката за WordPress.org


WordPress Plugin за кратки кодове – кратки кодове Ultimate

Използвате ли таблици с данни в WordPress?

Какво мислите за таблиците и тяхното място в съвременния потребителски интерфейс на WordPress?

Блок редакторът на Гутенберг направи създаването на таблици много по-удобни за потребителя, така че случайните потребители вероятно ще са по-склонни да експериментират с тях сега. В крайна сметка таблиците са едно от онези класически неща, с които всеки, който някога е използвал MS Word, е доста запознат. Така че защо не бихте могли да го направите "просто ги добавете" до WordPress, нали?

Използвате ли много таблици с данни в WordPress? Ако е така, как да ги създадете?

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector