Как добавить статью (материал) в Joomla. Подробная инструкция.
Здравствуйте, уважаемые читатели. Эта статья посвящена тем, кто только начинает осваивать движок Джумлы. В сегодняшнем уроке мы с вами научимся создавать и публиковать статьи (материалы) в Joomla, научимся настраивать отображение кнопки Подробнее для перехода на полную версию статьи, а также научимся вставлять картинки в статьи.
Создание и публикация статьи (материала) в Joomla.
Давайте для начала просто попробуем создать и опубликовать первый материал (article) на сайте и посмотрим, появится ли он на нашем сайте. Запомните, что любые операции с материалами в Joomla (создание новых, редактирование существующих, публикация, снятие с публикации и удаление статей) производятся в менеджере материалов. Чтобы туда попасть логинимся в админку Joomla, далее в верхнем меню переходим Материалы -> Менеджер материалов. Для создания материала жмем наверху на кнопку Создать.
Мы попадем на страницу создания материала. Данная страница состоит из нескольких вкладок. При добавлении на сайт новых статей я пользуюсь в основном вкладками: Материал и Публикация. Давайте пробежимся по всем вкладкам.
Вне вкладок расположено два элемента:
Заголовок. Здесь указываем название нашей будущей статьи. Содержимое данного поля по умолчанию отобразится в теге title страницы (это то, что выводится в заголовке окна браузера) и в тегах h1 (или h2, в зависимости от используемого шаблона).
Алиас. Псевдоним, использующийся для формирования URL адреса страницы с нашим материалом. Если оставить пустым, то джумла сама заполнит это поле, переведя название статьи в транслит. Можно заполнить самому латинскими буквами без пробелов, допускаются дефисы и знаки подчеркивания.
Остальные элементы расположены во вкладках.
Вкладка Материал. Это основная вкладка. В ней присутствует текстовый редактор, в котором мы и набиваем непосредственно текст статьи. По умолчанию Joomla поставляется с WYSIWYG редактором TinyMCE. Кнопки редактора очень похожи на кнопки обычного текстового редактора. При наведении на кнопку появляется всплывающая подсказка, так что думаю здесь вы и сами разберетесь.
По умолчанию текстовый редактор отображается в стандартном режиме. В этом режиме отображаются не все кнопки. Как перевезти редактор в расширенный режим для отображения всех кнопок я расскажу ниже.
Справа от редактора есть еще группа полей, которые показаны на рисунке ниже.
Давайте пробежимся по ним.
Поле Состояние является важным, т.к. позволяет публиковать или снимать статью с публикации на сайте. Не опубликованные статьи не выводятся на сайте. Выставляем данное поле в значение Опубликовано.
В поле Категория выбираем из выпадающего списка категорию к которой будет относится статья. Так как мы с вами категории еще не создавали, то по умолчанию имеем только одну единственную категорию Uncategorised. Создавать категории мы будем позже в следующих уроках.
Назначение поля Избранные разберем чуть ниже в данной статье. Пока оставляем по умолчанию в значении Нет.
В поле Доступ выставлено значение по умолчанию Public, т.е. данный материал после публикации его на сайте будет доступен всем посетителям сайта. Если вы захотите в будущем, чтобы статья была доступна только зарегистрированным пользователям, нужно выбрать из выпадающего списка Registered.
Поле Язык используется только в случае, если вы создаете мультиязычный сайт. Оставляем его настройки по умолчанию в значении Все.
Следующее поле Метки появилось в Joomla начиная с версии 3.x. Метки (их еще называют тегами, англ. tags) чем то напоминают категории, но в то же время они дополняют их, позволяя объединять в группы материалы из разных категорий. Пока оставляем это поле пустым.
Далее переходим во вкладку Публикация.
Возьмите за правило всегда заполнять поля Мета-тег Description и Мета-тег Keywords. Многие вебмастера утверждают, что поисковики уже не учитывают содержимое данных полей и их заполнять не нужно. Хочу вам сказать, что по крайней мере Гугл учитывает содержимое этих полей. Вкратце скажу, что содержимое мета-тега Description используется поисковыми системами при формировании сниппетов в поисковой выдаче, а при помощи мета-тега Keywords вы помогаете понять поисковой системе какие ключевые слова несут основную смысловую нагрузку в данной статье. Ключевые слова заполняем через запятую. Пять шесть ключевиков достаточно, указываем те слова, по которым можно составить представление о содержании статьи.
Поле Мета-тег Robots указывает поисковым роботам каким образом индексировать вашу статью и нужно ли ее вообще индексировать. Если вы хотите запретить индексирование данной статьи (т.е. чтобы она не появлялась в выдаче поисковых систем), то можете выставить это поле в значение No index. Значение No Follow означает, будут ли переходить поисковые роботы по ссылкам, содержащимся на данной странице и передавать другим страницам, на которые ведут ссылки, "вес" текущей страницы. В нашем случае оставляем это поле в значении По умолчанию, что равноценно значению Index, Follow.
Остальные поля в данной вкладке заполнять не обязательно.
Сохраняем статью и открываем главную страницу сайта, чтобы посмотреть появилась ли наша статья.
Как видим, статья не появилась. Давайте разбираться, почему она не появилась.
Нам нужно понять, что выводится на главной странице сайта сразу после его установки и как сделать, чтобы созданная нами статья появилась на сайте. Для этого в верхнем меню админки Джумлы переходим по пунктам Меню - > Менеджер меню. Открываем одно единственное меню. Открываем в нем единственный пункт меню Главная и видим, что пункт меню Главная выводит Избранные материалы.
Значит, чтобы наша статья выводилась на главной странице сайта, нам нужно пометить ее как избранную. Возвращаемся в менеджер материалов, открываем созданную нами статью на редактирование и справа от редактора выставляем поле Избранные в значение Да. Сохраняем изменения и обновляем главную страницу сайта. Мы видим, что наша статья появилась на главной странице сайта. Таким образом мы выяснили, что на главной странице сайта по умолчанию после его установки выводятся избранные материалы.
Выводим анонс статьи и кнопку "Подробнее" ("Читать далее") на полную версию статьи.
Наша статься выводится на главной странице целиком. Мы же хотим, чтобы на главной выводились только анонсы статей, а под анонсами отображалась бы кнопка Подробнее (Читать далее), которая ведет на страницу с полной версией нашей статьи. Для этого снова открываем нашу статью на редактирование. Ставим курсор мыши в том месте нашей статьи, на котором будет заканчиваться анонс и жмем на кнопку Подробнее.
В редакторе появился горизонтальный текстовый разделитель. Весь текст, который до разделителя, появится в анонсе. Сохраняем статью и смотрим. Теперь на главной выводится только часть статьи, которая до разделителя кнопки Подробнее. При переходе по кнопке Подробнее попадаем на полную версию статьи.
Вставляем картинки в статью на Joomla.
Какая же статья обходится без красивой картинки? Редактор TinyMCE, который используется по умолчанию в Joomla, позволяет легко и быстро добавить картинку в материал.
Есть два способа отображения картинки в материале:
- Первый способ - это когда мы загружаем картинку на сервер нашего сайта и затем встраиваем ее в наш материал.
- Второй способ - это когда мы заливаем картинку на какой нибудь внешний хостинг картинок типа радикала или на внешние диски (Яндекс.Диск, Google Drive, Microsoft SkyDrive, DropBox) и затем встраиваем картинку в наш материал.
| Загрузка картинки на локальный сервер. | Загрузка картинки на внешний сервер. |
|---|---|
| Отсутствуют исходящие ссылки на внешние ресурсы, т.к. все картинки загружены на сервер сайта. | Каждая такая картинка по сути является исходящей ссылкой на внешний ресурс, где она располагается. Чем больше картинок, тем больше исходящих ссылок на внешние ресурсы. Большое количество исходящих ссылок не любят поисковые системы. Результатом может быть снижение SEO показателей сайта и некоторое проседание позиций сайта в поисковой выдаче. |
| Картинка всегда доступна, пока работает сайт. | Внешний ресурс, где хранятся картинки может оказаться недоступным, и картинки не смогут отображаться на сайте. |
| При открытии страницы сайта картинки подгружаются быстро, т.к. грузятся с локального сервера. | При открытии страницы сайта картинки могут долго подгружаться, т.к. загружаются с внешнего ресурса. |
| Чуть большая нагрузка на сервер, чем при втором способе, т.к. при каждом открытии страницы серверу приходится выполнять работу по отдаче картинки. Заметно только на сайтах с очень большой посещаемостью, на которых много картинок. Решается правильной конфигурацией веб сервера. | Нет нагрузки на сервер вашего сайта, т.к. работа по отдаче картинки возложена на внешний сервер. |
|
Подвержен хотлинкингу. Это когда люди вставляют ваши картинки на других сайтах вторым способом, т.е. в виде ссылок на ваш сайт. В этом случае серверу вашего сайта приходится выполнять дополнительную скрытую работу по отдаче картинки каждый раз, когда кем то запрашивается страница внешнего сайта, на которой опубликована картинка вашего сайта вторым способом. Можно запретить хотлинкинг, сделав соответствующие настройки в файл .htaccess при использовании веб сервера Apache, или в файл nginx.conf в случае использования вебсервера Nginx. Но есть и положительная сторона, связанная с тем, что картинки вашего сайта, опубликованные вторым способом на других сайтах по сути являются входящими внешними ссылками на ваш сайт. Что увеличивает ТИЦ и уровень траста вашего сайта. Т.е. это бесплатная внешняя SEO оптимизация сайта картинками. А это в свою очередь влечет некоторое увеличение позиций сайта в поисковой выдаче. |
Не подвержен хотлинкингу, т.к. второй способ сам является хотлинкингом. Т.е. используются ресурсы внешнего сервера, где хранится картинка для ее отображения на вашей странице. |
Некоторые советуют использовать второй способ аргументируя это тем, что данный способ не создает никакой нагрузки на сервер сайта, т.к. картинки подтягиваются с внешних ресурсов. Но я с этим утверждением не согласен. Если вы будете оптимизировать свои картинки перед их публикацией, т.е. размер картинки будет не более 70 Килобайт и вы настроите на сервере кэширование картинок, то нагрузку на сервер они будут давать мизерную. Могу вас уверить, что основную нагрузку на сервер создает база данных, а не картинки. Поэтому, советую сохранять картинки именно на своем сервере при их публикации.
Для этого ставим курсор мыши в том месте текста, где хотим вставить картинку и жмем на кнопку Изображение. Поверх нашей открытой страницы появляется новое окошко для вставки картинки, а все пространство вокруг данного окна затеняется. Такие всплывающие окна называются модальными. В этом окне нам нужно выполнить два шага:
- загрузить с компьютера на сервер сайта нужную нам картинку;
- выбрать загруженную картинку для вставки в материал.
Все картинки, которые мы загружаем на сервер сайта и вставляем на сайт, хранятся в папке images вашего сайта. Если в папке images созданы вложенные папки, то мы можем сохранить картинки в любой из этих вложенных папок. Для этого в выпадающем поле Каталог в самом верху модального окна выбираем папку назначения. Мы также можем выбрать нужную нам папку щелкнув на синий значок конкретной папки. Сразу после установки джумлы в папке images уже имеется некоторый набор созданных папок (banners, headers, sampledata) и картинок.
Я обычно удаляю все содержимое папки images и создаю в ней свою структуру папок со своими названиями, куда и сохраняю картинки. Удалять существующие каталоги и создавать новые удобнее всего подключившись к сайту при помощи самого популярного FTP клиента FileZilla.
После выбора папки для загрузки картинки с компьютера на сервер прокручиваем модальное окно до самого низа и в разделе Загрузить файл жмем на кнопку Обзор.
Выбираем нужную картинку на компьютере, которую хотим загрузить на сервер и жмем на кнопку Загрузить. В итоге наша картинка закачается в выбранную нами папку.
Но это еще не все. Мы только закачали картинку на наш сервер и теперь она доступна для вставки в нашу статью. Теперь, чтобы вставить картинку в статью мы выбираем нашу картинку из списка загруженных в нашей папке и жмем на кнопку Вставить, которая расположена в правом верхнем углу модального окна. Вот теперь наша картинка появилась в нужном месте нашего редактора. Но мы видим, что наша картинка вставилась как то не так. Появился ненужный отступ в тексте. Нам нужно, что бы текст огибал картинку слева или справа. Для этого выбираем курсором мыши нашу картинку и жмем на маленькую кнопку insert/edit image в панели кнопок нашего редактора. Появится другое модальное окно, в котором в поле Source уже забит путь к нашей картинке. Переходим во вкладку Advanced и в поле Style вбиваем следующую строку:
float:left;
Данное стилевое свойство выравняет картинку по левому краю и заставит текст обтекать ее справа.
Для выравнивания картинки по правому краю и соответственно обтекания ее текстом слева вбиваем следующую строку:
float:right;
При необходимости, мы также можем задать отступ текста от картинки указав в полях Vertical space и Horizontal space соответственно отступ по вертикали и отступ по горизонтали в пикселях.
В поле Border вкладки Advanced можем указать в пикселях ширину границы вокруг картинки.
Как расширить текстовый редактор в Joomla.
Для того, чтобы перевезти текстовый редактор TinyMCE в расширенный режим, идем в Расширения -> Менеджер плагинов. Находим в списке плагин с названием Редактор - TinyMCE и открываем его. В поле Режим редактора выбираем Расширенный и сохраняем настройки.
Редактор в расширенном режиме имеет уже набор кнопок как на рисунке ниже.
Вот мы и опубликовали первую статью в категории по умолчанию Uncategorised. Наверняка на вашем сайте, который вы собираетесь создать, вы планируете создать несколько разделов и даже подразделов для статей. За это в Joomla отвечает менеджер категорий. В следующем уроке мы научимся создавать категории (разделы) и подкатегории сайта.
Вы можете помочь проекту, рассказав о нем в социальных сетях:
Спасибо!
