Меню

Html шорты что это



Шорткоды

Шорткоды – могут содержать в себе какой-то PHP-код и функции, которые можно задействовать прямо в контенте записей и страниц. Появились в версии WordPress 2.5.

Например можем взглянуть на шорткод галереи, который выглядит так:

Понятное дело, что данный функционал даёт разработчикам WordPress потрясающие возможности — на сегодняшний день очень актуальна вставка в посты форм, кнопок, слайдеров.

Даже с приходом Gutenberg, вряд ли шорткоды в скором времени будут вытеснены блоками.

Кстати говоря, если вы интересуетесь темой разработки, я бы хотел порекомендовать вам свой видеокурс по созданию шаблона для WordPress с нуля.

Так же, как у функции могут быть аргументы, так и шорткод может иметь собственные параметры. Ещё один пример с шорткодом:

В параметре ids перечислены ID изображений, входящих в галерею, параметр size — размер вставляемых изображений.

Стандартные шорткоды WordPress

В WordPress уже есть определённый набор шорткодов, например тот же шорткоды галереи, с которым мы уже познакомились ранее.

Другие стандартные шорткоды это:

Экранирование шорткодов

А точнее, как сделать так, чтобы шорткод присутствовал в контенте вашего поста, но не выполнялся? Или другими словами, как я вывел шорткоды в предыдущей главе поста, не выполняя их?

Всё, что нужно сделать, это обернуть его ещё в одни квадратные скобки, вот так:

Если же у вашего шорткода есть открывающий и закрывающий тег, то он будет выглядеть следующим образом:

Обратите внимание, что эта история с экранированием работает только в том случае, если шорткод уже зарегистрирован на вашем сайте. Если же нет, то ожидайте, что будут отображены все скобки.

Ну и про HTML-сущности тоже помним, да? [шорткод]

На самом деле именно в этом моменте можно кекнуть, потому что часто встречаю уроки по WordPress, где их отображают с пробелом, типо [ gallery] и при этом уточняют, что пробел нужно удалить 😹

Как создать шорткод WordPress?

1. Простой пример

Создать свой шорткод не труднее, чем написать собственную функцию PHP. Например я решил создать шорткод [misha] , который при вставке в пост будет выводить URL главной страницы сайта.

  • Код можете вставить в файл functions.php (я имею ввиду тот, который находится в директории вашей текущей темы). Больше информации о вставке кода.
  • Имя шорткода должно быть обязательно в нижнем регистре и содержать только буквы латинского алфавита, цифры и символ подчеркивания.
  • Мы использовали функцию site_url() для вывода текущего адреса сайта.

2. Шорткод с параметрами (атрибутами)

Окей, я уже писал, что у шорткодов могут быть свои параметры, давайте теперь посмотрим как это делается.

В качестве примера я написал шорткод, который просто вставляет ссылку в пост, которая открывается в новой вкладке браузера target=»_blank» . Не думаю, что на деле он может быть полезен, но для нас сейчас главное — понять сам принцип работы шорткодов.

Параметров будет два: anchor и url — анкор (текст ссылки) и URL соответственно. Как будет выглядеть сам шорткод: [trueurl anchor=»Мой блог» url=»https://misha.agency/blog»] . Если параметр не будет указан в самом шорткоде, то будет использоваться его значение по умолчанию, заданное в функции.

  • Названия атрибутов шорткодов также рекомендуется использовать в нижнем регистре. Значения же атрибутов могут содержать любые символы.
  • Если в шорткод передать атрибут, который не представлен в атрибутах по умолчанию в функции shortcode_atts(), то этот атрибут будет проигнорирован.

3. Закрывающиеся шорткоды и шорткод внутри шорткода

Давайте возьмём шорткод из предыдущего примера и немного переколдуем его. Напомню, что шорткод выглядел так: [trueurl anchor=»текст ссылки» url=»URL ссылки»] .

Что, если мы переделаем его следующим образом: [trueurl anchor=»текст ссылки»]URL ссылки[/trueurl] .

Кроме того, вовнутрь закрывающихся шорткодов можно вставлять и другие шорткоды (благодаря функции do_shortcode()).

В соответствии с этим давайте переделаем наш код из предыдущего примера:

Теперь шорткод следующего вида [trueurl anchor=»главная»][misha][/trueurl] выведет ссылку на главную страницу вашего сайта (про шорткод [misha] я писал выше).

4. Используем буферизацию для вывода прямо в шорткоде

Иногда бывает, что никак не получается внутри шорткода возвратить результат, например мы используем функцию get_template_part() внутри. Что делать в таких ситуациях?

Решается это довольно легко – при помощи буферизации.

Добавляем кнопку вставки шорткода в визуальный редактор поста TinyMCE

Понятное дело, что гораздо удобнее вставлять шорткод будет через встроенный редактор TinyMCE, а если при этом будет ещё реализован интерфейс, позволяющий задавать параметры шорткода, то вообще круто.

PHP-код

Вне зависимости от того, будет ли ваша кнопка текстовая, либо с иконкой, будет ли она содержать дополнительные поля ввода (параметры шорткода) или нет — во всех случаях PHP-код регистрации кнопки будет одинаков.

В этом примере для получения URL папки с текущей темой я использовал функцию get_stylesheet_directory_uri(). true_button.js — собственно сама кнопка, создайте этот файл в директории с темой (или там, где вам удобно, но не забудьте в этом случае поменять путь к нему).

JavaScript. Пример простой кнопки

Займёмся содержимым файла true_button.js . Итак, создадим для начала простую кнопку, которая будет вставлять шорткод [misha] .

Текстовый вариант кнопки вставки шорткода в визуальном редакторе TinyMCE.

Кнопка с иконкой, выпадающим списком и с возможностью задавать параметры шорткода

Начну с того, что вставлю (а точнее заменю) код в файл true_button.js :

После вставки кода моя кнопка уже появилась и работает. Единственное только — у неё нет никакой иконки (ну кроме стрелочки вниз).

Сейчас нам понадобится немного CSS-кода. Прежде всего хочу сказать, что вы можете использовать:

  • Встроенные иконки TinyMCE.
  • Другие иконочные шрифты, в том числе и dashicons.
  • Любую картинку через background-image .
  • Изображение, закодированное в base64.
Читайте также:  Шапка с узелком детская спицами

В своем примере я использовал обычную картинку с перцем, которая у меня находится в той же директории, что и CSS-файл.

Если использовали этот же способ и иконка не появилась — попробуйте прописать к ней абсолютный URL.

Для подключения CSS используйте функцию wp_enqueue_style() либо хук admin_head .

Всплывающее окно, в котором можно задать параметры шорткода, появляющееся при нажатии на кнопку в визуальном редакторе.

Если вы хотите использовать dashicons, то ваш CSS для иконки перца будет выглядеть примерно следующим образом:

Применение шорткодов в коде PHP

Тут всё сводится к использованию одной функции — do_shortcode().

do_shortcode()

Функция в качестве параметра может содержать лишь один шорткод:

Или шорткод и какой-то контент:

Популярный пример, позволяет получить или вывести содержимое поста с применением шорткодов при помощи функции get_the_content():

Вот пожалуй и всё. Если у вас возникнут какие-то вопросы, пожалуйста, оставляйте их ниже в комментах, буду рад помочь.

Ещё пара интересных примеров шорткодов

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Источник

Спецификация W3C или WHATWG

Есть две спецификации HTML: W3C и WHATWG, какой из них верить? — спрашивают наши зрители Екатерина и Дмитрий. Верьте той, которая больше нравится, но не забывайте сверяться с браузерами. Давайте разберёмся.

Спецификация — это главный источник знаний: как для браузеров, так и для разрабочиков. Браузеры обрабатывают код по спеке, разработчики пишут код по спеке — и у нас всё вместе хорошо работает. Это называется «веб-стандарты» и вы не хотите знать, насколько всё было плохо до их широкого признания.

W3C — это консорциум всемирной сети, такая некоммерческая организация, в рамках которой разрабатывают технологии, на которых работает веб. WHATWG — это независимая рабочая группа по технологиям гипертекстовых веб-приложений, которую собрали в рамках W3C в середине 2000-х. Собрали не просто так, а по делу.

Когда-то в W3C решили отказаться от спецификации HTML 4 и начать разрабатывать XHTML, более строгую, формальную и, как потом стало ясно — слишком оторванную от реальности. В ответ на это собралась WHATWG, в которую вошли представители браузеров. Благодаря этому появилась спецификация HTML 5 со множеством по-настоящему полезных вещей. От XHTML осталась только привычка закрывать теги и кавычить атрибуты.

После выхода HTML 5 из рук WHATWG, спецификация пошла по формальному пути к рекомендации W3C и достигла её в 2014 году. Но по дороге что-то пошло не так и между WHATWG и W3C возникли разногласия. Из-за этого начали появляться различия между версиями. В 2011 году WHATWG вообще отказалась от нумерации HTML и начала разрабатывать спецификацию как живой стандарт, в духе вечнозелёных браузеров.

В итоге, сейчас у нас есть две спецификации: рекомендация HTML 5.1 по W3C и живой стандарт HTML по WHATWG. И у каждой — свои цели: HTML5 делает снимки реальности, нумерует их и выпускает рекомендации. Это отвечает на вопрос разработчиков: что уже есть в браузерах? WHATWG, напротив, старается опередить реальность, предложить что-то новое и предсказать изменения. Это уже ближе к задачам браузеров.

Так в чём же противоречия? Например, W3C рекомендует иметь всего один элемент main на странице, приравнивая его к ARIA-роли main. Это помогает скринридерам находить самое главное на странице. WHATWG допускает main в любом структурном элементе, как главную его часть, на манер header и footer.

Из спецификации W3C убрали элемент hgroup, объясняя это отсутствием реализаций в браузерах, слабыми примерами использования и потенциальными проблемами. Вместо него рекомендуют обычный header и параграф для подзаголовка. В версии WHATWG элемент hgroup на месте — раз уж добавили, то чего убирать.

Спецификация W3C также приводит расширенные примеры, рекомендации к использованию и развивает семантику элементов. HTML 5 поясняет важность уровней заголовков, рекомендует figcaption вместо атрибута title для картинок, объясняет как использовать alt, осуждает, но разрешает таблицы для раскладки, если есть role=»presentation» и так далее.

Вы наверное уже поняли, что мне версия W3C нравится больше. Прочная связь со спецификациями по доступности, большее количество примеров и недавний переезд на Гитхаб — очень подкупают. По-моему, у WHATWG просто отлично получаются другие спецификации: DOM, Canvas, Fetch, URL и многие другие.

Плохо, что у нас есть две спецификации вместо одной? Да. Так почему не объединить их в одну? М-м, это вряд ли: слишком уж разные подходы к разработке. Но знаете, всё не так плохо: это просто две площадки для дискуссий со своими правилами, куда приходят представители всех браузеров, комитетов и групп, чтобы так или иначе развивать веб. И вы приходите — всё на Гитхабе.

Какой спецификации верить? Слепо — ни одной, ориентируйтесь на реализации в браузерах и на практическую ценность. Если вы о ней не знаете, не значит, что её нет. Выберите ту спеку, которая больше нравится и обращайтесь к ней почаще — они написаны для вас.

Читайте также:  Кто носит шубу чебурашка

Это были HTML Шорты и Вадим Макеев. Задавайте вопросы на нашей странице или в комментариях к видео. На самые интересные мы ответим в следующих выпусках. Пока!

Источник

Адаптивная вёрстка

17 августа 2017

В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? — спрашивают наши зрители Екатерина и Константин — как правильно их применять? Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.

Когда мобильного веба не было даже в самых смелых фантазиях, весь интернет был на десктопных компьютерах с небольшими экранами. Оптимизирован для разрешения 1024 на 768 и браузера Internet Explorer 5! — гордо писали тогда на сайтах. Но прошло время, экраны подросли и пришлось к этому как-то подстраиваться. Сначала это были просто резиновые таблицы: колонки по 25%, содержимое 50%, а в отдельной строке colspan=3 и распорка для минимальной ширины. Надеюсь, вы не поняли о чём я сечас говорил.

Резиновая вёрстка — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины. Высоту в вебе в принципе не принято задавать — обычно она подстраивается под содержимое. Фикс или резина? — спрашивали верстальщики 2000-х про макет и втайне надеялись на второе, поинтереснее. Сейчас сложно представить, но когда-то это было прорывной идеей, которая усложнила вёрстку, но сделала первый шаг в правильном пути.

Таблицы для раскладки ушли, а резиновая вёрстка осталась. Если у вас эластичные флоаты, флексы… да хоть гриды! — это всё равно резиновая вёрстка. Но если ширина внешнего контейнера зафиксирована — это уже фикс, сколько бы ни было резины внутри. Чуть более универсальный фикс, но всё равно. В общем, главное чтобы сайт двигался так или иначе вместе с окном, а не торчал кирпичом где-то в центре или с краю.

Когда расширился круг устройств с интернетом и появились первые мобильные браузеры — встала задача как-то подстраиваться под них. Простая резина здесь уже не справлялась — нужно было переписывать стили. Одной из первых, в 2006 году появилась техника адаптивной раскладки Марка ван ден Доббельстина. В статье на A List Apart Марк предложил добавлять классы при загрузке или ресайзе окна и на каждый диапазон вешать стили. До первой реализации медиавыражений в Safari оставалось два года.

Когда в начале десятых годов появилось для чего адаптировать и чем адаптировать — мобильные браузеры и медиавыражения — вышли книги, давшие названия подходам: «Адаптивный веб-дизайн» Аарона Густавсона и «Отзывчивый веб-дизайн» Итана Маркота. Подходы Аарона и Итана продолжали идеи Марка, но с более современными технологиями и несколько отличались направлением мысли.

«Адаптивный веб-дизайн» Аарона предлагал гибко адаптировать сайты к возможностям устройств и браузеров. Важной частью этой философии был ненавязчивый JavaScript с прогрессивным улучшением — и всё это поверх семантической разметки. Хотя Аарон писал не совсем об этом, сегодня принято считать, что главное в адаптивной вёрстке — привязка к конкретным разрешениям и устройствам. Стили переключаются от одного брейкпоинта к другому, то есть у вас есть фиксированные макеты для iPad и iPhone, а то, что между ними вас не волнует.

«Отзывчивый веб-дизайн» Итана ставил во главу три вещи: резиновый макет, гибкие картинки и медиавыражения. Все размеры и отступы Итан предлагал указывать в процентах с сумасшедшими дробями для точности. Отличительной чертой подхода стало плавное изменение сайта, с ориентацией не на конкретные устройства, а на содержимое. То есть ваш резиновый макет хорошо выглядит не только на iPhone и iPad, но и в любой точке между ними.

Чуть позже Итан сформулировал ещё один важный принцип в книге «Сначала мобильные». Если до тех пор отправной точкой для адаптации вёрстки служила десктопная версия, то он предложил перевернуть схему и начинать с мобильной версии, а потом её улучшать. Почему так? Потому, что усложнять простое проще, чем упрощать сложное. Вдуматесь! А ещё потому, что нет соблазна просто спрятать сложно адаптируемое и обделить мобильных пользователей.

Ну как, стало понятно? Вот адаптивная, вот отзывчивая… М-м, нет, не очень. Из-за путаницы между техникой адаптивной раскладки и философией адаптивного веб-дизайна, из-за того, что все эти подходы прекрасно сочетаются и уже не проследить чёткую границу между ними — из-за всего этого, я плюнул на терминологическую чистоту и стал называть всё это адаптивным дизайном или адаптивной вёрсткой. Это понятие всегда было достаточно широким, чтобы вместить все остальные способы.

Да и принцип дискретной адаптации от размеров устройств и без резины имел смысл лет 10 назад. При сегодняшнем разнообразии устройств полагаться на конкретные размеры и жёстко переключаться между ними — значит однажды очень больно промахнуться. Притом, никто вам не мешает при полностью резиновой вёрстке дописывать адаптацию под нужные разрешения.

Ну и как теперь верстать? Просто! Сначала делаете мобильный резиновый макет, который хорошо вписывается в небольшие устройства. А когда размеры экрана или окна начинают расти — начинаете использовать появившееся пространство для улучшения интерфейса. Появляется боковая колонка, вторая, растут размеры картинок и подгружаются новые разрешения и так далее. То есть медиавыражения меняют стили не когда вы дошли до экрана самого модного телефона, а когда это нужно для содержимого сайта и удобства пользователя. Мы именно так и учим делать на интенсиве по продвинутой вёрстке.

Читайте также:  Шапка с градиентом для девочки мастер класс

Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: вьюпорт, медиавыражения, адаптивные картинки и другое. Сегодня мы сделали первый шаг и разобрались с подходами: он оказывается всего один. Про остальное ещё поговорим!

Источник

Shortcodes – что это и как использовать?

Приветствую, уважаемые читатели wpnice. Сегодня поговорим о такой полезной функции в вашем блоге как шорткоды. А последующие две публикации я посвящу обзору двух самых популярных плагинов по использованию шорткодов. Первый плагин бесплатный – Shortcodes Ultimate. И еще один, платный – Styles with Shortcodes. Изначально хотел сразу приступить к обзору плагинов, но все таки, решил сначала сделать небольшую статью о том, что такое вообще шорткоды.

Что такое шорткоды [shortcodes]?

Говоря простым языком, это возможность превратить сложный PHP код для вывода какого то контента в код короткий, простой и понятный. Если вы знакомы с PHP, то легко сможете создавать шортсоды сами. По крайней мере, простые. В интернете можно найти немало туториалов на эту тему. Если же вы шарахаетесь от любого программирования как «черт от ладана», тогда можете использовать уже готовые плагины для быстрой вставки и использования шорткодов.

Что дают шорткоды?

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

Шоркоды стали использоваться в WordPress c версии 2.5. Собственно говоря, многие привычные плагины именно тем и занимаются, что выводят необходимый пользователю контент именно в виде шорткодов. Например, плагин – Video Sidebar Widgets или всем известная галерея – Nextgen Gallery. Я уж не говорю о таком популярном плагине как Visual Composer.

Визуально шорткоды выглядят как правило, в виде текста заключенного квадратные скобки – [ shortcode ]. Их легко запомнить и достаточно просто вставить в контент вашей страницы, записи или даже в текстовый виджет в сайдбаре.

Ниже на вы можете посмотреть наиболее часто встречающиеся примеры использования шорткодов в текстах постов. Сделаны они с использованием инструментария уже входящего в состав премиум темы для моего сайта. Но точно такие же, можно использовать и установив соответствующие плагины со своими шорткодами, о которых я напишу чуть позднее.

Как их использовать?

Как правило, в плагине где есть возможность выводить результаты его работы шоркодами всегда есть возможность их скопировать. Например, вы создаете новый слайдер . После создания и сохранения новый шорткод с вызовом созданного слайдера появится в настройках.

Если вы используете специализированный плагин шоркодов для оформления страниц и записей, то почти всегда после его установки соответствующая кнопка появляется в редакторе. Нажимаете, выбираете нужный шорткод (может появится окно для дополнительного редактирования элементов) и вставляете его в нужное место страницы.

Источник

Что такое шортить простыми словами? Шорт и Лонг — в чем разница?

Если вы начинаете свой путь в мире инвестиций, то наверняка почти сразу столкнетесь (или уже столкнулись) с понятием шортить . Все то и дело рассказывают, что они что-то зашортили — удачно или не очень.

Шорт по своей сути это ставка на то, что цена на актив будет падать . Да-да, современные биржевые инструменты позволяют зарабатывать не только на росте цены, но и на её падении.

Шорт (short) = короткая позиция = игра на понижение работает следующим образом:

  1. Вы продаете актив, которого у вас нет (беря его в долг у брокера), при этом стоимость проданного зачисляется вам на брокерский счёт. Сам актив в вашем портфеле будет отображаться со знаком минус (например, » -10 акций Tesla «)
  2. Когда цена упадёт до нужного вам уровня, вы по более низкой цене покупаете актив, тем самым отдавая долг брокеру: возвращая взятые у него в долг ценные бумаги. Разница в деньгах остаётся у вас на счету.

Таким образом вы можете заработать на падении цены.

Главное всегда помните о возникающих комиссиях и конечно же о том, что ваша ставка может и не сыграть, а комиссию за маржинальную торговлю в любом случае платить придется!

Часто идет противопоставление между тем, чтобы покупать в шорт и покупать в лонг .

Лонг (long) = длинная позиция = ставка на рост — это, в свою очередь, классический подход: когда вы верите в рост актива , и заходите в него (=покупаете) с планом продать его дороже, когда цена вырастет.

В сегодняшнем видео мы разберём детали этих двух подходов и посмотрим на реальном примере, как шортить: вместе зашортим акцию в приложении Тинькофф Инвестиции и вы убедитесь, что абсолютно ничего сложного в этом нет — всего лишь несколько нажатий.

Смотрите и также узнаете, кто такие быки и медведи на бирже, и какой рынок — бычий или медвежий — лучше для инвестора.

Чтобы не пропускать другие публикации о простом и доступном всем (!) мире инвестиций, подписывайтесь на Telegram канал https://t.me/SuperEasyInvesting, Instagram https://www.instagram.com/super.easy.investing/ или Twitter https://twitter.com/elena_stark

Источник