перенести скрипты в футер joomla
Method for addind script in footer of Joomla (Using my plugin)
I am making a plugin for Joomla, which needs to add a javascript code in footer of the joomla site pages. Is there any method of adding such script to footer, without hacking the core files, as whoever installs the plugin, that script will get added.
3 Answers 3
There’s no method to add a script to the footer. However you could make a plugin that gets the output, searches for an appropriately named tag, like footer and use str_replace to add in your code.
By now I think there’s no option to load scripts on the bottom of the page.
But you can use these extensions achieve that:
Also i found one method. I prefer not to hack the core code, but that’s the best I can come up with at the moment.
I Hope it will help others 🙂
Not the answer you’re looking for? Browse other questions tagged php joomla or ask your own question.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.1.40358
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
С небес на землю, или Как перенести скрипты вниз, в подвал сайта
Доброго времени суток, друзья, гости и случайно заглянувшие на огонек посетители моего кошачьего блога!
Как-то, помнится, я обещала вам статью об одном из аспектов оптимизации скорости сайта — о переносе скриптов из начала страницы вниз, в ее конец. И не только обещала, но и написала, но в связи со сменой темы оформления на этом моем блоге написанное мне почему-то показалось неактуальным. В основном потому, что те методы и приемы, которые я использовала, с новой темой оформления не сработали.
Немного поразмыслив, я поняла, что вполне возможно, что как раз именно вам эта информация окажется очень своевременной и полезной. А потому все же представляю вашему несколько способов переноса скриптов, тормозящих загрузку сайта WordPress, вниз страницы.
Зачем переносить скрипты вниз, в подвал (футер) сайта
Прежде чем что-то делать, нужно ясно отдавать себе отчет в том, зачем мы это делаем и что нам это даст. Так зачем же опускать скрипты как можно ниже на странице, откладывая их загрузку?
Дело в том, что скрипт (в том понимании, в котором мы сейчас о нем говорим) — это JavaScript-код. JavaScript — это язык программирования, исполняемый в браузере, то есть работающий на стороне пользователя.
Теперь представим, что происходит, когда пользователь открывает страничку нашего сайта, в хедере которой расположено несколько (а хоть и один!) JS-скрипт.
На стороне сервера отрабатывает весь php-код, формирует единый html-документ — исходный код страницы — который и начинает передаваться в браузер. Код скрипта также встраивается в этот документ в его начале.
Браузер начинает обрабатывать полученную информацию. Почти сразу же натыкается на JS-код, останавливает загрузку страницы и начинает этот код исполнять. Затем продолжает загрузку, пока опять не встретит очередной скрипт.
Главное здесь то, что выполнение скриптов в самом начале никому не нужно — пользователь же еще не увидел страницу даже, браузер ведь еще не успел ее отобразить. К примеру, благодаря скриптам работает кнопка «Вверх». Но зачем выполнять скрипт для нее в начале загрузки, если сама кнопка, ее визуальное оформление все равно вызывается в футере?
А страница загружалась бы куда быстрее, если бы все скрипты были внизу: браузер быстро отобразил весь html-код, а уж в последний момент, пока пользователь осмотрится и сообразит, куда бы ему еще нажать, выполнил все скрипты.
Именно поэтому имеет смысл все скрипты переносить как можно ниже, ближе к концу страницы, в ее футер.
Как перенести скрипты вниз
Способов, друзья мои, здесь несколько. И для разных скриптов подойдут разные варианты.
Но прежде всего нужно понять, что же это за скрипты, и где нам их увидеть.
Увидеть все скрипты, которые подключаются в заголовке вашего сайта, достаточно просто: достаточно открыть исходный код вашей страницы и просмотреть самое его начало. Все подключенные скрипты вы легко опознаете по тегу ), а непосредственно его текст. И тогда вычислить, какому плагину он принадлежит, можно только отключая поочередно плагины. А если не поможет, то и переключив на время тему оформления — возможно, виновна именно она.
Отключение стандартного подключения JQuery WordPress
Итак, три js-файла все еще подключаются в заголовке блога. Причем два из них — это стандартное вордпрессовское подключение библиотеки JQuery, а с третьим мне расправиться не удалось.
Дальше мы с вами вступаем на довольно зыбкую почву. Дело в том, что у всех из нас разные шаблоны. И набор плагин тоже разный. Поэтому вполне возможно, что после выполнения моих следующих рекомендаций у вас на блоге откажет какой-то функционал: слайдеры, кнопки «Вверх-Вниз», лайтбоксы, что угодно еще.
Впрочем, не попробуешь — не узнаешь. Поэтому предлагаю попробовать отключить стандартную JQuery, чтобы получить минус два скрипта в хедере. Ну а если уж что-нибудь да сломается, то я оставляю для вас отходной путь.
Собственно, отключить JQuery в WordPress я придумала двумя способами:
Я добавила после нее функцию, отменяющую ее:
Кстати, у меня на блоге после отключения JQuery перестал работать плагин лайтбокса. Так что все пришлось вернуть на круги своя. Однако если вы приверженник минимализма в дизайне и не используете на своем блоге всякие хитрые штучки :), то возможно, имеет смысл воспользоваться.
Вот таким образом и можно перенести скрипты вниз, ускорив (во многих случаях значительно), свой любимый блог.
И не надо говорить мне, что это ужасно сложно и практически невыполнимо, что вы боитесь лезть в код и вообще чайник чайником.
Внимательно перечитайте статью, уловите основной принцип — и вперед, на баррикады! Для редактирования кода используйте связку «Notepad++» и «FileZilla», и помните, что горячие клавиши в ноутпад++ (отмена и повтор) — это ваше все :).
И напомню, что эти рекомендации были проверены мною на шаблоне «Admired», но вот для новой моей темы оформления не подошли совсем. Поскольку ее разработчики подошли к делу грамотно, и все скрипты, которые только было возможно, уже опустили вниз страницы. Поэтому здесь я к оптимизации скорости загрузки блога в том, что касается скриптов, зашла с другой стороны. Но подробный отчет — в следующий раз.
Была с вами всегда ваша вечнопушистая Web-Кошка. Удачного дня, джентльмены и леди!
Мы начинаем пятый урок посвященный редактированию шаблонов в CMS Joomla 3, на этот раз мы поговорим о футере для сайта. Разберем возможные варианты оформления футера и некоторые подходы к его созданию.
Что такое футер
Футером или подвалом сайта называют самую нижнюю его часть, в которой, как правило, содержится информация о сайте, об авторских правах и т.д. В стандартном исполнении в шаблоне Protostar, футер не содержит какую либо значимую информацию:
Стандартное содержание футера такое – текущий год, имя сайта и ссылка «Наверх» ведущая в начало страницы. Если честно такой вариант футера совершенно бесполезен посетителям нашего сайта, кроме того ссылка «Наверх» в нашем случае абсолютно не нужна, мы для этих целей уже сделали красивую кнопку.
Поэтому для начала предлагаю избавиться от стандартного содержимого футера. Открываем файл index.php стандартного шаблона Protostar и ищем код, который отвечает за вывод футера. За вывод футера отвечает код между строками 205 и 219, который выглядит следующим образом (в зависимости от версии Joomla и внесенных изменений в индексный файл строки кода могут отличаться):
А теперь удалим лишний код с 210 по 217 строку, в результате код для футера будет таким:
По сути, мы удалили все что можно, оставив лишь возможность вывода модулей в футере, за это отвечает строка:
Сохраняем индексный файл, переходим на сайт и обновляем страницу. Содержимое футера исчезло, этого мы и добивались. Теперь можно добавлять в футер новую информацию по своему усмотрению, но прежде чем её добавить стоит ответить на вопрос – а что может находиться в футере сайта?
Какую информацию отображать в футере сайта
Для того чтобы сделать футер эффективным в нем должна присутствовать информация которая может заинтересовать посетителей сайта. В зависимости от направленности сайта эта информация может отличаться. Вот небольшой пример той самой информации, которая может содержаться в футере:
Не пытайтесь впихнуть в футер своего сайта все вышеперечисленное, переизбыток информации, как и его отсутствие, так же ни к чему хорошему не приведет.
С другой стороны не важно, какая информация будет содержаться в футере вашего сайта, главное чтобы она вписывалась в общий дизайн и была красиво оформлена.
Создание футера для сайта
Теперь давайте отбросим теорию и приступим непосредственно к созданию футера. Способов формирования футера может быть несколько:
Каждый из способов по-своему хорош, например, на первоначальном этапе использование модулей значительно упростит задачу, а метод когда модули не используется, ускорит загрузку страницы. В любом случае выбор остается за Вами.
Для того чтобы рассмотреть все возможные варианты я остановлю свой выбор на третьем варианте. Таким образом, у Вас будет общее представление, что и как редактируется.
В качестве примера я решил разбить футер на три вертикальные части, слева будут выведены ссылки на определенные страницы сайта, в центре будет некое подобие логотипа, справа выведем небольшой текст. За отображение левой и правой части футера будут отвечать модули, а логотип пропишем руками в индексном файле.
Теперь вносим изменения в индексный файл шаблона, мой код получился таким:
И для наглядности скриншот:
Как выводятся модули понятно, а вот на логотипе хочу остановиться подробнее. За вывод логотипа отвечает код:
На первый взгляд обычный HTML тег для изображения, но вместо привычного пути расположения файла написан php код. Данный код на первый взгляд может показаться сложным и непонятным, но на самом деле если его разобрать, то становится понятно, что ничего сложного в нем нет:
В результате использования данного php кода мы получаем относительный путь до файла с изображением. Другими словами не зависимо от того какое имя будет у сайта и какой используется шаблон изображение будет взято из папки images выбранного шаблона.
Сохраняем файл index.php, теперь его можно закрыть, он нам больше не пригодится.
Теперь создадим несколько модулей, которые выведем в только что созданных новых позициях. Первый модуль будет выводить меню в футере, а второй небольшой текст.
Я для примера создал новое меню с несколькими пунктами специально для футера (тем, кто забыл, как создавать меню прочитайте уроки – как создать новое меню и как создавать пункты меню):
На следующем этапе создаем модули – для меню с типом «Меню» и для текста с типом «HTML-код» (как создать модуль). В качестве позиций для них выбираем только что созданные позиции модулей:
Чтобы отличать наше меню для футера среди остального меню на сайте, в настройках модуля меню добавляем к нему суффикс класса «_footer»:
Для того чтобы не объяснять что за модуль с типом «HTML-код» я покажу принцип его действия на скриншоте:
Я заполнил данный модуль определенным текстом, который будет выведен в футер, кроме обычного текста я написал небольшой php код, который отображает текущий год:
Сохраняем модули и идем на сайт для проверки результата и вот что у меня получилось:
Результат хоть и есть, но не сильно впечатляет. Теперь нам необходимо более адекватно оформить элементы футера при помощи CSS.
Для начала оформим новые блоки футера:
Следующий кандидат на оформление это меню, к которому я применил следующие стили:
И в завершении отделяем футер от основной части контента:
Сохраняем файл стилей, переходим на сайт и смотрим на результат:
Вот мы и создали футер для нашего сайта, который смотрится гораздо веселее, чем стандартный. На этом данный урок считаю заершенным, а в следующем уроке мы проверим возможные ошибки адаптивного дизайна и исправим некоторые недочёты. Кроме того советую почитать статью о том как создать шаблон Joomla 3 и в частности футер с нуля быстро при помощи Bootstrap.
❓Как оформить на Joomla подвал сайта
Грамотно оформленный футер – это дополнительные плюшки для сайта, ведь в этом случае улучшается юзабилити, пользователь (клиент) видит, что попал не на помойку и с большей вероятностью проводит активные действия (покупки, подписки и т д.). Ниже я расскажу, как оформить подвал сайта на CMS Joomla, то есть внести в футер нужный текст и изменить его цвет и размер.
Картинка подвала
В 99% шаблонов картинка в подвале уже есть, но она не всегда адекватна с учётом целей сайта или же требует корректировки при изменении дизайна. Усложнять задачу я не буду, для начала мы поменяем картинку подвала без изменения её размера.
Для этого заходим в папку шаблона templates/шаблон/images через Ftp-соединение и ищем там картинку футера. Можно открывать все подряд пока не увидите нужную, но проще поставить на Mozilla плагин Firebug, включить его и посмотреть данные об элементе.
Ещё проще открыть исходный код web-документа и найти название image там.
После выгрузки картинки через фоторедактор Paint смотрим размер фото в пикселях – это поможет без лишней рихтовки не вылезти ей из рамок шаблона при обратной загрузке. Также важно сохранить формат.
Формат и размеры сняли, теперь изменяем картинку. Тут я вслепую не советчик, расскажу лишь о правилах юзабилити для подвала:
Редактируете файл под нужды сайта (можете вставить в него новые элементы или просто обрамить рамками или изменить цвет) и загружаете его обратно.
Размер
Изменение размера опишу коротко, так как тут придётся вносить правки в файл CSS шаблона. Для изменения размера подвала (высоты и ширины) сначала делается под этот размер картинка, потом ставите её в папку images шаблона, после этого идёте в файл шаблон/CSS и указываете новые вводные для футера. Они должны точно совпадать с размерами нового футера.
В работе Firebug обязателен. Проблема в том, что править (изменять размер и CSS) придётся и другие элементы шаблона сайта – шапку, сайтбар и пр.
Текст футера
Теперь остаётся добавить в footer нужный вам текст. Писать в подвале научные трактаты не надо, а вот указать год старта сайта, напомнить про запрет на копирование без ссылки и вставить ссылку на морду для удобства навигации не помешает.
Здесь нам поможет модуль «Произвольный HTML-код» и немного хитрости. Открываем модуль, называем его, например, копирайт и вставляем текст подвала, в котором не забываем указать ссылку на морду. Указываем показ на всех страницах кроме главной и жмём сохранить.
Теперь отмечаем «копирайт» галочкой и нажимаем копировать. Заходим в «Копирайт 2», делаем ссылку неактивной и указываем показ только на морде. Теперь в футере главная не будет ссылаться сама на себя, а на внутряке будет навигационная ссылка.
Подобным образом можно оформлять и другие элементы сайта, главное не спешить и не забывать о чудодейственной силе бекапа.
Создание шаблона Joomla. Часть 6 – футер для сайта
В самой первой статье посвященной созданию собственного шаблона для Joomla 3 я говорил, что данный процесс пусть не слишком сложный, но все же трудоемкий и занимает относительно много времени. В подтверждение тому данная, уже шестая по счету статья.
Ранее мы разобрали основные моменты создания шаблонов для CMS Joomla 3, разобрались с макетом, сверстали и оформили шапку сайта, главное меню, область контента и многое другое. Таким образом, мы плавно подобрались к заключительной части любого шаблона – футеру (или если хотите подвалу сайта).
Что такое футер, для чего он нужен и какая информация в нем содержится, мы говорили в статье посвященной редактированию стандартного шаблона и чтобы не повторяться, мы сразу начнем верстать и оформлять футер для нашего самодельного шаблона.
Для начала давайте посмотрим, что у нас должно получиться:
Как видите футер у нас двухцветный, значит, будет разбит на два отдельных блока – верхний и нижний. В верхнем блоке по аналогии с шапкой сайта мы расположим логотип и надпись, а так же сделаем две позиции для модулей, для вывода дополнительной навигации.
После того как мысленно разделили макет футера на отдельные блоки можно приступать к вёрстке. Первый блок у нас будет общий для всего футера, ему присвоим соответствующий идентификатор:
Внутри данного контейнера разместим еще два, которые будут отвечать за верх и низ шапки, они будут разной высоты и цвета:
Для начала займемся нижней частью футера, её реализовать проще всего. Добавим несколько блоков и напишем обычный текст:
Как видите, внутри нижнего блока футера расположен еще один блок, который будет фиксированной ширины (в моем случае 1140 пикселей). Если Вы уже читали предыдущие части статей на тему «Как создать собственный шаблон», то наверняка уже знаете, для чего используется данный контейнер.
Для надписи был использован обычный тег
Для нижней части футера применим следующие стили:
Результат должен получиться вот таким:
Как видите, я не стал заморачиваться с иконками социальных сетей, их при необходимости всегда можно будет добавить в любое другое время.
Теперь переходим к верхней части, её можно разбить на три основных блока – логотип с текстом, меню в центре и некая контактная информация в правой части футера. Соответственно нам надо создать в блоке с классом ft-top три вложенных блока:
Что это за контейнеры и для чего они нужны? Первые два блока с классами ft-menu-1 и ft-menu-2 мы используем под меню, третий ft-logo будет содержать логотип и текст. Все эти три контейнера вложены в блок с классом ft-top-cont (контейнер ограниченной ширины) и все они вместе находятся в родительском контейнере с классом ft-top (с шириной во весь экран).
Хочу обратить внимание на то, что блок, который будет контейнером для логотипа расположен в самом низу, хотя в макете логотип выводится в первую очередь. Тут нет никакой ошибки, все сделано именно так для того чтобы на мобильных устройствах логотип выводился под меню в самом низу страницы. А на устройствах с большими экранами мы изменим порядок вывода блоков при помощи определенных классов Bootstrap-а.
С фреймворком Bootstrap разберемся позднее, а сейчас давайте наполним содержимым наши блоки. В блоки с классами ft-menu-1 и ft-menu-2 мы будем выводить модули:
А блок, предназначенный для логотипа, заполним обычной картинкой и текстом:
Теперь давайте создадим несколько модулей (как минимум 2) и установим для них позиции с именами position-4 и position-5 соответственно. Я в качестве модулей использовал обычное меню, точнее сразу два меню, которым присвоил заголовок «Меню в футер» и «Меню в футер 2» (вот такая не богатая фантазия). В результате футер у меня получился вот таким:
Вот теперь пришло время поговорить о классах фреймворка Bootstrap, с помощью которых мы сможем легко оформить футер и изменить очередность вывода блоков в зависимости от разрешения экрана. Тем самым мы получим красивый и адаптивный футер для нашего шаблона (и сайта соответственно).
Давайте добавим к нашим блокам несколько дополнительных классов предопределенных Бутстрапом:
Классов получилось целых пять штук, тем, кто знаком с фреймворком Bootstrap наверняка понятно для каких целей они нужны. Но я все же вкратце напишу, за что отвечает каждый из них.
Представьте себе, что вся ширина области определенного контейнера состоит из 12 равных вертикальных частей – в этом суть блочной системы Бутстрапа. Для того чтобы сделать блоки плавающими и расположить их горизонтально достаточно просто указать сколько таких частей будет занимать каждый блок, причем сумма частей не должна превышать 12 штук, то есть их общего количества. В противном случае последний блок будет съезжать.
С теорией разобрались, теперь перейдем непосредственно к используемым классам:
В нашем случае мы смещаем блоки, предназначенные для меню вправо на 6 частей при ширине экрана от 768 до 991 пикселя (col-sm-push-6), а блок с логотипом так же на 6 частей, но влево (col-sm-pull-6). Таким образом, мы меняем приоритет вывода блоков на экран, не затрагивая при этом код разметки.
Возможно, Вам стало интересно, почему смещение происходит именно на 6 блоков влево (в случае с логотипом) на планшетах и на 7 блоков для компьютеров. Тут все просто, мы хотим увести наш логотип в самый левый край, для этого необходимо его сдвинуть на разницу общей ширины контейнера и самого блока. В нашем случае для планшетов это 12-6=6, а для компьютеров 12-5=7.
Ситуация с блоками меню несколько иная, так как мы в данном случае смещаемся вправо, то необходимо учитывать ширину левых блоков, а если ширина левого блока на планшетах у нас состоит из 5 частей (блок с логотипом), следовательно первый блок с меню надо подвинуть на 5 частей вправо. Надеюсь, объяснил доступно.
Общий код для футера у нас должен получиться вот таким:
Осталось применить минимальные стили оформления:
В результате на устройствах с большим экраном наш футер выглядит следующим образом:
А на мобильных устройствах с шириной экрана менее 768 пикселей футер выглядит уже иначе:
Остается внести заключительные штрихи и оформить все это дело при помощи CSS. Как видите, нет ничего сложного, благодаря Bootstrap можно легко и просто решить практически любые задачи в кратчайшие сроки.