В погоне за скоростью загрузки сайта и его индивидуальностью нередко требуется использование своего CSS или JavaScript кода на определённых страницах или в записях. Представьте себе ситуацию, что у Вас есть сайт, на котором нужно разместить прайс в таблице.
Конечно, для CMS WordPress разработано ряд продвинутых и бесплатных плагинов для управления таблицами, например Websimon Tables или WP-Table Reloaded. С помощью стандартных хуков данные плагины встраивают свой код CSS и JavaScript в шапку сайта и впоследствии облагораживают вид таблиц и привносят их нужный функционал.
Посмотрим на это с точки зрения оптимизатора. После установки и активации таких плагинов лишний код стилей и скриптов будет доступен на каждой странице сайта, но у Вас явно нет таблиц на каждой странице. Тоже касается и кнопок и оформления форм для контакта и т.д.
Если Вы разбираетесь в том, какой код и для чего использовать, проще всего добавить его только на определённые страницы, что может значительно уменьшить количество ошибок и общий вес загружаемой страницы, а также скорость загрузки сайта в целом. Это положительно повлияет на отношение поисковиков к сайту.
Что необходимо для вставки CSS или JavaScript в запись?
Для начала нам понадобится добавить небольшой код в файл с функциями шаблона. Этот файл называется functions.php, а код нужен для обработки шорткода:
function cf_shortcode($atts, $text) {global $post;return get_post_meta($post->ID, $text, true);}@add_shortcode('cf',' cf_shortcode');
Этот код можно поместить сразу перед закрывающейся конструкцией «?>» в конце файла. Теперь мы сможем добавить в пост или страницу любую переменную из произвольных полей.
Второй этап — добавляем произвольные поля для CSS и JS, я их так и назвал. Как значение указываем нужный код, соблюдая синтаксис:
На скриншоте выше я использовал вставку кастомного шрифта в запись на WordPress с помощью произвольного поля CSS. Если интересно как вставить произвольный шрифт только на одну страницу сайта на WordPress — читайте пост на сайте Itpride.net о черных шрифтах-иконках.
Теперь нужно вставить этот код в тело записи. Для этого используем шорткод [cf]css[/cf], где css — имя нашего произвольного поля, а функция в файле function.php обработает его.
Вот и вся магия — быстро и просто. Удачи.
6 комментариев
Анатолий says:
Июн 6, 2012
как сделать на своем сайте такое же окошко с соц.кнопками, как у вас слева?
Voff says:
Июн 6, 2012
Я делал самостоятельно
Кристи says:
Сен 2, 2012
Добрый вечер. Как раз искала нечто подобное. Но есть вопрос, надеюсь поможете найти на него ответ. Этот шорткод, как именно, а точнее, как правильно его ставить на страницу? В самом верху, в конце страницы или нет разницы где?
И ещё, у меня есть 2 css, одна главная, для всего сайта,а вторая отдельная, для таблицы, но у обоих таблиц есть конфликтующие переменные, к примеру тот же тег Li со своими стилям к таблице, и вот уже сколько бьюсь и не могу привязать именно вторую таблицу к самой таблице, подскажите, возможно ли так сделать (подключить лишь одну из css) и если да, то как? Заранее вам очень благодарна.
Voff says:
Сен 2, 2012
Конфликты обычно решаются указанием отцовского контейнера, например #content li и #table-row li — не будут конфликтовать. Этот шорткод позволяет Вам на отдельной одной странице поставить какой-либо стиль CSS и работает это только на этой странице, остальные будут без изменений, ставить можно хоть сверху, хоть снизу — это же не Javascript
Andy says:
Янв 28, 2013
Сорри, может это и очевидно, но я новичек в wp администрировании.
Не понятно как реализовать второй этап? Где это запрятана эта форма в wp из которой можно добавить произвольные поля для CSS и JS?
Voff says:
Янв 28, 2013
Возможно она не показана. В новой записи найдите сверху «настройки экрана» и там пункт «Произвольные поля» — поставьте галочку.Если она уже есть ищите под постом (может быть уже свернута). Если доступ не полностью админский — попросите админа добавить вам управление этими полями