Как подогнать изображение под размер записи в WordPress

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

В идеальном варианте, широкоформатное изображение должно точно вписаться по ширине:
Как подогнать изображение под размер записи в WordPress

А бывает и вот такая неприятность (выявлено в плагине wPPage):
Как подогнать изображение под размер записи в WordPress

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

Как же это исправить?

Есть два варианта: изменить масштаб изображения в самом WordPress, либо изменить фактический размер изображения в графическом редакторе.

Уверен, что большинство людей скажут, что первый вариант наиболее удобный, потому что быстрый и не требует особых знаний и каких-либо временных затрат. Я соглашусь с этим, но есть нюанс: ваши пользователи со временем станут вас ненавидеть.

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

Я рекомендую изменять размер изображения под нужный вам, используя любой удобный графический редактор. Это может быть Adobe Photoshop, GIMP, Paint.Net или какой-нибудь другой.

Как узнать требуемый размер?

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

Рассмотрим на примере браузера Google Chrome, в остальных (Opera, Mozilla Firefox, Яндекс.Браузер) всё делается абсолютно аналогично.

  • Нажимаем правой кнопкой мыши на любом элементе на странице и в появившемся меню выбираем «Инспектировать элемент»:
    Как подогнать изображение под размер записи в WordPress
  • Откроется отладчик:
    Как подогнать изображение под размер записи в WordPress
  • Пугаться его вида не стоит — он не такой страшный, как кажется.
    В нашем случае был выделен и подсвечен тот элемент, на котором я нажал правой кнопкой мыши.
  • Теперь нам нужно определить контейнер, в котором выводится наш контент, собственно.
    Для этого перещёлкиваем по всем элементам древовидной структуры, снизу вверх:
    Как подогнать изображение под размер записи в WordPress
  • Обращаем внимание на то, что при выборе какого-либо элемента, он будет подсвечиваться на самой странице сайта:
    Как подогнать изображение под размер записи в WordPress
  • Ваша цель — найти такой элемент, который бы был по размерам с шириной страницы.
    В моём случае это элемент ps_content:
    Как подогнать изображение под размер записи в WordPress
  • Как я узнал, что это именно он? Смотрите на скриншот, вы поймёте сразу:
    Как подогнать изображение под размер записи в WordPress
  • Обратили внимание, что именно эта ширина и нужна мне для картинки?
  • Теперь остаётся лишь найти эти самые размеры ширины контейнера. Вот они:
    Как подогнать изображение под размер записи в WordPress

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

Есть вопросы? Задайте их в комментариях! :-)

Как изменить язык сайта на WordPress

Во время прохождения обучения работе с WordPress через Skype, у одного из учеников возник вопрос: как можно тренироваться на русскоязычной версии WordPress, а затем перевести его на другой язык. В этом случае был датский язык.

Давайте рассмотрим процесс изменения языка вашего сайта на WordPress.

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

Смена языка WordPress вручную

Этот путь сводится к простым шагам: скачать файлы на ваш компьютер, загрузить на хостинг, изменить конфигурационный файл WordPress. Приступим?

Скачиваем необходимые файлы

  • Заходим на сайт WordPress в раздел языковых файлов
  • Находим нужный язык и в скобках будет указан код, который нужно запомнить:
    Как изменить язык сайта на WordPress

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

  • Теперь необходимо зайти на страницу с языковыми файлами и найти нужную нам директорию по международному коду языка:
    Как изменить язык сайта на WordPress
  • Переходим по ссылке «trunk»:
    Как изменить язык сайта на WordPress
  • Затем заходим в «messages»:
    Как изменить язык сайта на WordPress
  • Находим файлы, который оканчиваются на «.mo»:
    Как изменить язык сайта на WordPress
  • И сохраняем их на компьютер:
    Как изменить язык сайта на WordPress

Отлично, первую часть работы выполнили. Не устали? :-)

Загрузка файла на FTP

Теперь необходимо загрузить скачанные файлы на ваш хостинг в директорию /wp-content/languages/.

Если вы не знаете, как это сделать, воспользуйтесь инструкцией по работе с FTP.

Активация языка в файле wp-config.php

Аналогично с предыдущим пунктом, заходим в корневую директорию сайта, находим файл wp-config.php и открываем его на редактирование. Нас здесь интересует настройка WPLANG:
Как изменить язык сайта на WordPress

Изменяем её на da_DK:
Как изменить язык сайта на WordPress

Сохраняем файл и загружаем обратно на FTP.

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

Плагин WP Native Dashboard

Для решения той же задачи, существует специальный плагин — WP Native Dashboard.
Как изменить язык сайта на WordPress

Установка и активация стандартная для всех плагинов в WordPress. Поэтому предлагаю сразу перейти к настройке и использованию плагина.

  • Заходим в меню «Параметры» — «WP Native Dashboard»
  • Проставляем все галочки в настройках:
    Как изменить язык сайта на WordPress
  • Выбираем версию вашего WordPress и нажимаем «Check Repository»:
    Как изменить язык сайта на WordPress
  • После этого начнётся процесс загрузки списка доступных языков:
    Как изменить язык сайта на WordPress
  • Теперь остаётся выбрать нужный язык и нажать кнопку «Download»:
    Как изменить язык сайта на WordPress

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

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

Заключение

После выполнения этих операций язык вашего сайта на WordPress изменится на нужный вам.
Как изменить язык сайта на WordPress

WordPress SEO by Yoast — настройка и использование

Практически все блоггеры, которые используют WordPress для управления своим сайтом, пользуются плагином All in One SEO Pack (далее по тексту — AIOSP), оно и понятно — это самый популярный, известный и стабильный плагин из всех существующих решений для поисковой оптимизации сайта.

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

Имя его — WordPress SEO by Yoast.
WordPress SEO by Yoast

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

Перед тем как начать, нам необходимо установить сам плагин из репозитория WordPress.

Импорт настроек из AIOSP

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

Для переноса настроек существует специальный плагин, который называется SEO Data Transporter. Устанавливается он так же просто, как и все плагины в WordPress. После импорта его можно будет удалить.

Рассмотрим его использование.

  • Заходим в меню «Инструменты» — «SEO Data Transport»:
    Переезд с All in One SEO Pack на WordPress SEO by Yoast
  • В левом списке выбираем из какого плагина или источника выполняем импорт:
    Переезд с All in One SEO Pack на WordPress SEO by Yoast
  • А в правом, куда или во что конвертируем:
    Переезд с All in One SEO Pack на WordPress SEO by Yoast
  • После этого проведём анализ того, что удастся перенести с помощью плагина.
    Для этого нажмём кнопку «Analyze»:
    Переезд с All in One SEO Pack на WordPress SEO by Yoast
  • Теперь нажимаем на кнопку «Convert» и дожидаемся результата операции:
    Переезд с All in One SEO Pack на WordPress SEO by Yoast
  • А вот и он, кстати:
    Переезд с All in One SEO Pack на WordPress SEO by Yoast

После этого заходим в плагины и удаляем «All in One SEO Pack», он больше не нужен.
Переезд с All in One SEO Pack на WordPress SEO by Yoast

WordPress SEO by Yoast — настройка

Предлагаю пробежаться по необходимым настройкам плагина, не трогая сомнительные пункты. Всё разделы находятся в меню «SEO» главного навигационного меню панели управления вашего WordPress.

Заголовки и метаданные

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

Вкладка «Общие»

В этой вкладке вносил изменения только в раздел «Очистка от ссылок секции <head>»:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Все остальные параметры со снятыми чекбоксами.

Вкладка «Главная страница»

Переезд с All in One SEO Pack на WordPress SEO by Yoast

Был изменён формат вывода заголовка главной страницы. Оставил только название сайта и номера страниц. Не вижу смысла выводить на каждой странице в TITLE название моего блога.

Вкладка «Типы записей

Записи:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Остальные настройки не трогал.

Вкладка «Остальное»

Изменил только это:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Все английские фразы переименовал на русские варианты. Блог-то на русском :-)

Социальные сети

В этом разделе можно указать создание мета-заголовков, которые будут учитываться социальными сетями при расшаривании записей с вашего блога. В текущей версии доступны настройки для Facebook, Twitter и Google+.

Я же выбрал для себя использование плагина Open Graph.
Плагин Open Graph

XML карта сайта

А вот и первая ощутимая польза от этого SEO плагина — возможность отказаться от использования плагина Google XML Sitemaps, либо его аналогов. Теперь эта возможность имеется в»WordPress SEO by Yoast «из коробки». Более того, стоит заметить, что наш плагин создаёт карту сайта гораздо богаче по возможностям, чем её аналог.

Для активации этой настройки необходимо нажать соответствующую галочку:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

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

Так как у меня блог однопользовательский и я против того, чтобы в индекс залетали какие-либо данные об авторе, активирую следующую настройку на текущей странице плагина:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Однозначно не лишним будет установить и следующие галочки:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

В своём блоге я не использую отдельные страницы для файлов вложений, поэтому исключаю её из карты сайта:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Так же, я не использую теги и отличные от «записей» форматы материалов. Поэтому смело отключаю их:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Ну и, последняя настройка, это количество записей на странице в карте сайта. Я поставил 100:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Постоянные ссылки

Ещё одна отличная возможность избавиться от дополнительного плагина. В данном случае, первая опция даёт вам возможность с чистой совестью удалить плагин No Category Base, если вы пользуетесь им.
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Для тех, кто не знает что это, расскажу: эта опция удаляет слово «category» из URL-адресов ваших записей. Я считаю что в тех блогах, которые не используют страницы рубрик как отдельные страницы для продвижения по каким-либо запросам, можно смело устанавливать эту галочку, либо закрывать в robots.txt индексацию рубрик.

Следующая настройка актуальна для тех, кто не использует плагин «.html on PAGES», добавляющий расширение html для всех страниц. Ну, либо же для записей, если вы используете аналогичный плагин.
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Если же вам принципиально важно использовать какой-то суффикс в ваших URL — отключайте эту опцию обязательно!

Следующие три опции я включил, руководствуясь здравым смыслом и логикой :-)
Переезд с All in One SEO Pack на WordPress SEO by Yoast

В последней настройке выбираем тот протокол, который используется у вас. На 99.9% это будет HTTP:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Хлебные крошки

Они же breadcrumbs. Очень полезная штука для создания дополнительной навигации по вашему сайту.

На сайте выглядит следующим образом:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Для создания хлебных крошек у меня используются встроенные возможности в теме, поэтому здесь я лишь приведу пример из настроек нашего плагина:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

RSS

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

Я использовал его для анонса своего бесплатного курса «WordPress для чайников».

Делается это очень просто: вставляем нужный нам HTML код в соответствующую область и радуемся:
Переезд с All in One SEO Pack на WordPress SEO by Yoast

Кстати, если вы ещё не подписаны на обновления моего блога, самое время подписаться здесь! :-)

Обновляем метаданные рубрик

Так как для вывода метаданных рубрик у меня используется плагин Category SEO Meta Tags, то мне пришлось вручную переносить данные из этого плагина в WordPress SEO by Yoast. Делается это очень просто.

  • Заходим в раздел «Записи» — «Рубрики»
  • Нажимаем на нужные нам рубрики:
    Переезд с All in One SEO Pack на WordPress SEO by Yoast
  • Копируем значения из конфигурации плагина:
    Переезд с All in One SEO Pack на WordPress SEO by Yoast
  • И вставляем их в настройки WordPress SEO by Yoast:
    Переезд с All in One SEO Pack на WordPress SEO by Yoast
  • Не забываем сохранить настройки кнопкой «Обновить».

Эту операцию необходимо проделать со всеми рубриками на сайте. Долго, неприятно, но надо. Как только закончите — можно смело удалять плагин Category SEO Meta Tags.

Заключение

Вот с помощью таких нехитрых и простых шагов мы избавились от трёх плагинов в пользу одного. Надеюсь материал был полезным для вас. Буду рад комментариям и вопросам :-)

Контент для тестирования вашего сайта

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

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

Что это за загадочный зверь?

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

Более чем три года назад началась разработка этого монстра и вылилось в http://wptest.io/

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

  • Заходим на главную страницу WP TEST и нажимаем кнопку «Download»:
    Контент для тестирования вашего сайта
  • Сохраняете архив на ваш компьютер и извлекаете из него все файлы
  • Из архива нам понадобится файл wptest.xml
  • Теперь остаётся лишь импортировать контент по инструкции.

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

Как вставить видео с YouTube в блог на WordPress

На момент публикации это последняя запись из цикла статей по интеграции записей с различных веб-сервисов. До этого были рассмотрены: Facebook, Google+, Twitter и Instagram. Ссылки на них вы найдёте в конце этой заметки.

А сейчас мы рассмотрим два способа вставки видео из YouTube: через oEmbed и вставкой HTML-кода.

Подключаем видео через oEmbed

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

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

  • Находим понравившееся видео на страницах YouTube и переходим на него
  • Копируем ссылку из адресной строки:
    Как вставить видео с YouTube в блог на WordPress
  • Вставляем эту ссылку простым текстом в вашу запись на WordPress и сохраняем.

Результат:
http://www.youtube.com/watch?v=NMvENuzJDv4

Если у вас по каким-то причинам не получается использовать этот способ, то вывод один: у вас очень старая версия WordPress. Обновитесь прямо сейчас и не забудьте сделать резервное копирование.

Вставка с использованием HTML-кода

Этот способ железный и подходит в абсолютно всех случаях, без исключений.

  • Заходим на страницу с понравившимся нам видео
  • Под самим видео находим закладку «Поделиться» и выбираем в ней «HTML-код»:
    Как вставить видео с YouTube в блог на WordPress
  • Копируете код, представленный на скриншоте ниже и вставляете его на свой блог:
    Как вставить видео с YouTube в блог на WordPress
  • Если нужно изменить размер — используйте для этого выпадающий список под HTML-кодом

Теперь, после вставки скопированного кода в текст вашей записи или на страницу, вы увидите нужное видео :-)


Похожие записи:

Как вставить запись из Twitter в блог на WordPress

По аналогии с рассмотренными ранее постами о вставке записи из Facebook в WordPress и вставке записи из Google+ в WordPress, рассмотрим сегодня возможность добавления сообщения из сервиса Twitter.

Эта социальная сеть с каждым днём набирает всё большие обороты. Количество пользователей — сумасшедшее, качество контента — высочайшее, поэтому грех не использовать релевантные вашим постам записи из Twitter.

Технология, с помощью которой можно просто и удобно вставлять записи из множества веб-сервисов в WordPress называется oEmbed и введена она была аж в версии 2.9.

Принцип использования очень прост — копируете URL со страницы любого из допустимых сервисов (всего их 17 на сегодняшний день), вставляете без каких-либо кодов в вашу страницу и она автоматически преобразуется в контент связанного типа. Если это видео с YouTube — подставляется видео, если запись из Twitter — формируется красивое окно с сообщением.

Стоит отметить, что Twitter в oEmbed был добавлен совсем недавно, а именно, в версии 3.4. Поэтому, если вы используете старую версию, тогда вам придётся использовать какие-либо внешние плагины, для интеграции своего сайта с этой социальной сетью.

Но я настоятельно рекомендую выполнить обновление WordPress до самой последней версии.

Существуют два варианта вставки: свои и чужие твиты.

Вставка записи из своего аккаунта

Здесь будет ровным счётом три шага, для достижения необходимого результата.

  • Заходим на страниц своего аккаунта и находим запись, которую хотим вставить на сайт.

    Нажимаем на ссылку «Details». В русской вариации будет называться иначе :-)
    Как вставить запись из Twitter в блог на WordPress

  • После этого необходимо скопировать URL открывшей страницы:
    Как вставить запись из Twitter в блог на WordPress
  • И остаётся вставить эту ссылку в нужное нам место в записи на WordPress:
    Как вставить запись из Twitter в блог на WordPress

Результат:

Вставка записи из чужого аккаунта

Бывает, что вам нужно сослаться на чей-то чужой твит, давайте рассмотрим этот случай.

  • Находим интересный твит:
    Как вставить запись из Twitter в блог на WordPress
  • Наводим на него мышкой и в появившейся ссылке «More» выбираем «Embed Tweet».
    В русскоязычном интерфейсе надписи будут другие, не знаю как их правильно перевести для вас :-)
    Как вставить запись из Twitter в блог на WordPress
  • В появившемся окне необходимо скопировать приведённый код и вставить его в свою запись в режиме «Текст»:
    Как вставить запись из Twitter в блог на WordPress

Вот и всё. Таким вот нехитрым способом можно подключить твиты с понравившихся вам аккаунтов на WordPress :-)


Похожие записи:

Как вставить запись из Facebook в блог на WordPress

Про вставку изображения из Instagram и плагин для интеграции Instagram в WordPress я уже писал ранее, теперь пришла очередь Facebook.

Если вы ещё не подписались на регулярные обновления моего блога — самое время подписаться прямо сейчас. Вовремя не внедрённая фишка может стоить вам денег :-)


Так вот, представьте, что вам необходимо вставить какую-то из своих записей в Facebook на блог, разбавить контент, либо наоборот, оформить блок «Рекомендованные», согласно тематике записи.

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

Для этого нужно сделать ряд простых шагов.

  • Заходим в Facebook и находим нужную нам запись. Пусть будет эта, например:
    Как вставить запись из Facebook в блог на WordPress
  • Теперь нам нужно получить ссылку на саму запись.
    Для этого нажимаем на текстовую надпись с датой публикации:
    Как вставить запись из Facebook в блог на WordPress
  • Откроется новое окно с возможностью управления этой записью.
    Нас интересует следующий блок со ссылками:
    Как вставить запись из Facebook в блог на WordPress

    Ссылка «Embed Post» как раз позволяет нам интегрировать запись из Facebook на любой сайт.

  • Либо, можно использовать второй вариант.
    Нажимаем на вот этот треугольник возле самой записи:
    Как вставить запись из Facebook в блог на WordPress
  • Во всплывающем меню выбираем «Embed Post»:
    Как вставить запись из Facebook в блог на WordPress
  • После нажатия на эту ссылку появляется всплывающее окно, из которого нам остаётся скопировать код из выделенной области экрана:
    Как вставить запись из Facebook в блог на WordPress

Теперь вставляем его в режиме «Текст» в нужную нам запись и наслаждаемся результатом:


Похожие записи:

Согласие на обработку персональных данных © 2024 Alexander Kadyrov
Яндекс.Метрика