Flamio.ru

Работа и деньги
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как перевести шаблон сайта

Перевод темы WordPress на русский язык

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

Эта статья поможет разобраться, как локализировать шаблон на русский язык, используя программу Poedit, и как выполнить перевод тем WordPress при помощи одного плагина под названием CodeStyling Localization.

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

Для локализации в WordPress используется GNU gettext технология, которая говорит о том, что исходный программный код должен быть прописан на английском языке. Почему так?

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

Русификация темы WordPress

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

Где найти шаблон, готовый к переводу? На самом деле, это несложно. Например, на сайте WordPress.org имеется специальная пометка translation-ready, указывающая на тот факт, что тема подготовлена разработчиком к переводу, и вы сможете перевести ее на русский язык, не изменяя исходный программный код.

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

Совет! Шаблоны для WordPress нужно скачивать с официального ресурса. Использовать темы с «левых» сайтов, особенно, если они бесплатные, очень рискованно.

Файлы .po и .mo

После скачивания темы переходим к этапу «Как перевести тему WordPress на русский язык?». Ищем в теме директорию languages. Именно в ней находятся нужные файлы для перевода темы шаблона на разные языки. Имя файла должно указывать на локаль. К примеру, ru_RU – это русский. Все эти файлы идут с расширением .po и .mo.

.po файлы хранят в текстовом формате переведенные строки. К этим данным обращается переводчик темы.

.mo файлы — те же строки, но в скомпонованном варианте. Данные файлы использует WordPress ядро для отображения выполненного перевода.

Отредактировав перевод в файле .po, его следует скомпилировать в .mo, чтоб подтвердить и применить исправления. Используя редактор Poedit, это можно делать автоматически.

Как русифицировать Вордпресс при помощи Poedit

Poedit — это редактор .po файлов (gettext каталогов), отвечающий за перевод программного обеспечения. Большая часть разработчиков отдает предпочтение gettext, чтоб локализовать программы Unix. Так, решив перевести любимые программы Linux, можно смело использовать Poedit.

Какие особенности имеет редактор Poedit:

  1. Имеется проверка орфографии.
  2. .mo файлы компилируются автоматически.
  3. Присутствует поддержка множественных форм.
  4. Есть возможность редактировать комментарии.
  5. В наличии удобный строчный поиск.

Скачать Poedit редактор можно по ссылке https://poedit.net/download.

Запустив программу для создания нового перевода, нужно (через раздел меню Файл) создать из POT-файла каталог.

Выбираем .pot файл (или .po) в директории languages вашей темы. Далее редактор предложит заполнить форму перевода и сохранить новый созданный каталог. Сохраняем его в той же languages директории под именем локали, к примеру, ru_RU.po.

Если нужно, то для внесения поправок в существующий перевод, нужно открыть соответствующий .po файл.

Работа с редактором Poedit не вызывает дополнительных вопросов. Все просто и понятно. Исходный вариант текста расположен слева, а текст перевода — справа. Чтоб внести коррективы в перевод, нужно щелкнуть на нужную строчку и ввести правильный перевод. Нажав сохранить, редактор сам скомпилирует новый перевод и создаст соответствующий .mo файл.

Читать еще:  Создать сайт бесплатно

Установка перевода в Вордпресс

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

Если на сайте тема уже установлена, то достаточно загрузить файлы ru_RU.po и ru_RU.mo в ее директорию languages. Это можно сделать, к примеру, через FTP.

Если шаблон установлен на русском языке, то изменения будут видны сразу. Если он на английском языке, следует поменять локаль в wp-config.php. Нужно найти в файле строчку WPLANG и изменить ее:

В результате, тема на сайте будет отображена на русском языке. Однако это не единственный способ!

Как русифицировать WordPress, используя плагин?

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

    1. Чтоб воспользоваться плагином, первый шаг — это скачать его и установить. В консоли находим Плагины-Добавить новый.
    2. В окне поиска вводим CodeStyling Localization и жмем Поиск.
    3. Когда поисковик его найдет, нажимаем Установить, а далее Активировать.
    4. В меню консоли сбоку выбираем Инструменты-Локализация.

    1. Появится список, состоящий из локализаций WordPress, установленных тем и плагинов. Внизу будет размещено название нужной темы. Если ее нет, то русифицировать тему придется способом, указанным выше.

При отсутствии в перечне русского языка, нажимаем Добавить новый язык и отмечаем русский. В появившейся строчке русского языка жмем Сканировать и Завершить. Далее в строчке русского языка выбираем Редактировать. Откроется перечень фраз и перевод для них.

Можно редактировать отдельно каждую фразу, выбрав соответствующее действие справа.

Многие фразы отображаются с %s в конце. От этих внешних ссылок в отдельных случаях можно избавиться. Например, перевод «Powered by %1$s and %2$s theme by %3$s» можно заменить «Сайт на WordPress» без ссылок.

Переводить все имеющиеся фразы не обязательно, только самые важные. Проверив и отредактировав перевод, нажимаем над списком фраз Генерировать mo-файл.

Выполнив все этапы и поняв как русифицировать шаблон wordpress, плагин CodeStyling Localization можно смело удалить, так как даже после этого все .po и .mo файлы сохранятся.

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

Новости TemplateMonster

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

Как сверстать шаблон сайта из PSD в HTML и CSS

Совсем недавно я на блоге рассказывал как в Photoshop сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.

Так же по теме

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

Читать еще:  Как сделать возможность оплаты картой на сайте

Демо ι Скачать

Подготовка

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

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

Всё. В принципе мы первый шаг уже сделали. 🙂 Переходим к добавлению кода HTML.

Добавляем разметку HTML

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

Открываем наш текстовый документ index и вставляем в него следующий код:

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

Середина сайта

За средний участок отвечает вот этот код:

    >Низ сайта

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Вёрстка HTML и CSS

Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет 🙁 Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.

После того как Вы вставили код в наш текстовый документ index, его нужно сохранить. Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8» и сохраняем.

Когда файл сохранился, переименуйте его разрешение с .txt в .html. Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».

CSS

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

Добавляем вот этот код CSS

Тут мы задали несколько стилей для тега body. Ширину и высоту в 100%. Цвет для текста #333. Шрифты, и его размер, а так же расстояние между строчек.

Для списков мы отключили точки, а для ссылок отменили подчеркивание.

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

Главные блоки (верх, середина и низ)

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

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content будет выравнивать сверху левую и правую сторону сайта.

#colLeft отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Читать еще:  Авто тематика для сайта

Верхнее меню

В коде HTML между тегами

Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:

Открываем наш PSD макет. В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Затем Вас перекинет на новый слой уже с вырезанной линией.

Переходим во вкладку «Файл» и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.

А вот теперь мы можем смело добавить стили для нашего меню, вот они:

Вот, что должно получиться:

Иконки социальных закладок

Данные иконки вырезаются так же как и линия для меню. Открываем группу «Хидер» далее «Соц закладки». У нас там будет три иконки.

Слой иконки от rss преобразовываем в смарт объект и сохраняем под именем rss-variation. Тоже самое делаем и для остальных двух иконок, только иконку от mail называем «email-variation», от Твиттера «twitter-variation» не забываем всё сохранить в папку images.

Теперь под HTML кодом меню добавляем вот этот код:

А в стили CSS нужно добавить вот это:

Логотип

В PSD макете ищем группу «Лого». Слой с логотипом преобразовываем в смарт объект, нажимаем по иконке лого два раза, и сохраняем его с именем logo. После код социальных закладок вставляем HTML код:

Главное, выпадающее меню

Под кодом логотипа добавляем код главного меню:

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

Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):

Выбираем инструмент «Рамка»

Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:

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

Ну а сейчас можно смело добавлять CSS:

Блок «Последние записи»

Сразу после тега нужно добавить HTML код, который будет отображать серый блок:

Левый блок с последними записями

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

Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.

Самая последняя строчка в коде

И конечно же не забываем про CSS для постов:

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

Правая часть (Сайдбар)

Добавляем поиск. После тега вставляем следующее:

И стили для поиска:

Виджет

После кода поиска вставляем:

Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h2img и сохранить в папке images нашего шаблона.

CSS код виджетов:

Футер

В конечном итоге получаем вот такой шаблон:

Демо ι Скачать

Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂

В общем если у Вас будут вопросы спрашивайте в комментариях.

Ссылка на основную публикацию
Adblock
detector