Худий сайт із шорткодом WordPress - Rashedi Consulting GmbH
Аудіо- та відеофайли, галереї, списки відтворення, кнопки та інші елементи дизайну: за допомогою шорткодів WordPress та, можливо, відповідного плагіна, ви можете легко інтегрувати все це на свою сторінку - часто лише за допомогою одного [шорткоду].
Це не тільки робить вашу сторінку шикарною, але й ваш код. Захоплююча річ: за допомогою шорткодів ви можете інтегрувати складні елементи, не маючи власних знань програмування. Цей пост покаже вам, як саме працює короткий код Lean Code.
І не хвилюйтеся: працюючи з шорткодами, ви, звичайно, можете пити колу і їсти піцу!
Щоб переглянути повну картину, натисніть на неї
1. Що таке шорткоди WordPress?
"Шорткоди" - це скорочення кодів, які представляють довший код. Завдяки їм код залишається чітким і зрозумілим, хоча він включає складні функції. Детальний код, для якого шорткод є абревіатурою, точно визначається в іншому місці темою або плагіном. Отже, шорт-код працює як своєрідне посилання на деталізований код: WordPress автоматично включає це через шорт-код без необхідності вказувати його окремо в коді сторінки.
Замість того, щоб вставляти довгі та докладні розділи коду на сторінку, наприклад для галереї, достатньо короткого коду [галерея]. Точний код галереї надається у темі або плагіні. Для WordPress короткого посилання "[Галерея]" достатньо, щоб отримати детальну інформацію в іншому місці та мати можливість відображати галерею.
Шорткоди особливо цінні, коли певний елемент - наприклад, галерея - потрібно вставляти кілька разів на сторінку. У цих випадках достатньо докладно виконати код в один момент та інтегрувати його на сторінки, на яких він повинен бути реалізований, за допомогою короткого коду.
2. Як виглядає шорткод WordPress?
У текстовому вікні шорткод відображається у квадратних дужках. Залежно від шорт-коду, ви можете або повинні визначити подальші параметри, щоб WordPress міг реалізувати шорт-код.
Повернемось до прикладу галереї. Основний шорткод виглядає так:
WordPress тепер знає, що він повинен включати галерею на сторінці у відповідний момент. Але це нічого не говорить про кількість та вибір зображень. З цієї причини ми надаємо WordPress додаткову інформацію, додаючи додатковий атрибут: ідентифікатор зображень, які будуть включені в галерею (і які, таким чином, також визначають кількість зображень):
Тепер ми маємо можливість додати велику кількість додаткових атрибутів, наприклад кількість стовпців або розмір зображення ("розмір"):
[стовпці галереї = "2" size = "large"]
Точні значення, які можна ввести тут, регулюються окремо для кожного шорт-коду і тут не можуть обговорюватися окремо. Положення щодо шорт-коду галереї можна знайти в Кодексі WordPress
Інші шорткоди вбудовані в код WordPress за допомогою квадратних дужок та, можливо, інших атрибутів.
3. Приклади шорткодів у WordPress
Сам WordPress за замовчуванням пропонує шість шорткодів. Ви завжди можете використовувати їх - навіть якщо ви не використовуєте певні плагіни для шорткодів. Ці шість шорткодів:
За допомогою звукового шорткоду ви можете вставляти аудіофайли на свій веб-сайт WordPress. Потім відвідувачі можуть відтворити їх одним клацанням миші. Зазвичай ви включаєте ім'я файлу в шорт-код - врешті-решт, WordPress повинен знати, який звук він взагалі повинен відтворювати:
Звичайно, важливо, щоб відповідний аудіофайл із цим іменем файлу зберігався у вашій медіатеці.
Детальну інформацію про звуковий шорткод ви можете знайти тут.
За допомогою шорткоду для відео ви можете, правда, це не дивно, інтегрувати відео на свою сторінку. Як і у випадку із зображеннями, введіть тут назву файлу відеофайлу. Останні повинні знаходитись під носіями у вашій медіатеці. Шорт-код виглядає так, наприклад:
Детальний опис цього короткого коду в кодексі WordPress можна знайти тут.
Скористайтеся коротким кодом субтитрів, щоб додати підписи до зображень. WordPress вимагає ввести "width", за допомогою якого ви можете вказати ширину підпису в пікселях. Ви також можете вибрати, чи відображатиметься підпис ліворуч, посередині чи праворуч під зображенням. Ви також можете призначити ідентифікатор або клас підпису, щоб змінити дизайн за допомогою CSS.
Більше інформації про підписи можна знайти тут.
Вбудований шорткод дозволяє вбудовувати елементи в WordPress і призначати їм фіксований розмір. На відміну від інших шорт-кодів, вбудований шорткод містить елемент відкриття та закриття, тобто
де обрамлений елемент знаходиться між двома елементами шорткоду. Потім можна призначити атрибути висоти та ширини елементу, що відкриває, наприклад
Ви можете знайти більше інформації про вбудований шорткод тут.
За допомогою шорткоду галереї ви можете інтегрувати галерею на свій сайт WordPress. Ви можете знайти більш детальне пояснення в попередньому розділі цього допису, посилання на офіційний опис шорткоду в WordPress Codex тут.
Ви можете інтегрувати список відтворення на свій сайт WordPress, використовуючи шорт-код для аудіо- та відеофайлів. Використовуючи різну додаткову інформацію, ви можете додати дизайн, тип файлу та ідентифікатори інтегрованих елементів. В кінці шорткод може виглядати так, наприклад:
[тип відтворення = "audio" ids = "211,212,213" style = "dark"]
Ви можете знайти детальну інформацію про шорткод списку відтворення у Кодексі WordPress тут.
4. Як додати шорт-код на свій сайт WordPress
Якщо ви хочете вставити шорткоди, спочатку перевірте, який редактор ви використовуєте.
Якщо у вас немає Версія WordPress до WordPress 5.0 або WordPress 5 з плагіном Classic Editor увійдіть у свій сервер WordPress. Тепер натисніть Публікації або Сторінки в рядку меню ліворуч - залежно від того, чи хочете ви створити нову сторінку чи нову публікацію в блозі. У нашому прикладі ми вирішили відредагувати стару публікацію в блозі.
Тепер ви можете вибрати один із двох видів: візуальний та текстовий. Визначтеся з поданням тексту тут. Вам буде показаний HTML-код. Просто вставте відповідний шорткод сюди.
Щоб переглянути повну картину, натисніть на неї
Якщо у вас є Редактор Гутенберга робити це інакше. Створіть новий блок для шорткоду. Для цього натисніть на знак плюс ліворуч від порожнього поля для блоку.
Щоб переглянути повну картину, натисніть на неї
Тепер ви можете вибирати елементи з різних категорій. Перейдіть до категорії Віджети.
Щоб переглянути повну картину, натисніть на неї
Тепер натисніть на піктограму шорткоду.
Щоб переглянути повну картину, натисніть на неї
WordPress тепер створить для вас блок шорткодів.
Щоб переглянути повну картину, натисніть на неї
Введіть вибраний шорт-код у цей блок. Увага: Навіть якщо WordPress вже знає, що ви хочете включити шорткод у цей блок, вам все одно доведеться використовувати квадратні дужки для введення.
Щоб переглянути повну картину, натисніть на неї
5. Плагіни шорткоду
Якщо ви програмуєте шорткоди WordPress самостійно, ви - як уже свідчить дієслово "програма" - ви на рівні програміста. Іншими словами: Ви більше не працюєте з функціями WordPress, а працюєте безпосередньо з кодом PHP.
Якщо ви хочете цього уникнути, але не хочете відмовлятися від використання конкретних шорткодів, радимо використовувати плагін шорткоду. Вони вбудовують велику кількість шорткодів на вашу сторінку, не вимагаючи нічого самостійно програмувати.
На ринку існує велика кількість таких плагінів, три з яких ми хотіли б представити вам на цьому етапі: