Здравствуйте читатели. Недавно меня попросили объяснить как настроить таблицу стилей на WordPress. И я решил описать ключевые навыки. Что такое таблица стилей я объяснять не буду наверно все знаете. Если не знаете то вам для начало нужно посетить «Яшу» или «Гошу».
Любой современный сайт не может работать без этой таблицы. Если может то он примет убогий вид. Как например первые сайты которые писались на.html.
Для WordPress полно готовых шаблонов сотни вариантов. Выбирай и делай только. Однако у всех веб мастеров существует проблема его изменить. Делать доработки удалять ненужные поля, уменьшить шрифт, расстояние между строк, отступы и тд. Все эти многочисленные операции можно сделать редактируя один лишь файл. Ну на разных шаблонах их может быть больше.
И так приступим.
Находим файл стилей.
Файл стилей вы можете зайти двумя способами либо напрямую через сервер, либо через консоль. Я обычно пользуюсь консоли, удобно и быстро.
Внешний вид — редактор
Здесь вы увидите список всех фалов сайта. Нужно выбрать самом внизу нужный файл для настройки и редактирования style.css WordPress
На втором рисунке показано сама таблица стилей в формате.css обычно принято называть этот файл style.css
И так мы определились с файлом. И мы будем редактировать его. Перед тем как начнете редактировать что-то, менять советую скопировать этот файл в оригинале на свой компьютер.
Настройка, редактирование css
Для настройки таблицу стилей применяют специальные программы чтобы облегчить свою жизнь. Но в моем случае все проще и нечего не нужно.
Я юзаю Google Chrome. Пожалуй по мне самый лучший браузер. И я при редактировании таблицу стилей пользуюсь именно с ним. Но можно пользоваться и с Opera.
Для чего я все это говорю? НАс интересует функция правой кнопкой мыши по сайту. Точнее в нужную нам область. Щелкая правой кнопкой выходит функция «Просмотр кода элемента»
При этом элемент выделяется и снизу появляется его код. А с права появляется то что нам нужно. Значения из таблицы стилей которые относятся к выделенному элементу.
Здесь мы видим все элементы выделенного элемента. Серое выделение это отступы. Из значений видно что padding составляет 15px с верху и 14px с боку.
Если нам нужно изменить это значение мы можем их изменить прямо на месте. и посмотреть как будет выглядит уже сейчас. Если вы подобрали нужный размер сейчас вам нужно это значение найти и изменить на самом таблице стилей.
Как мы это делаем? НА рисунке я подчеркнул красными линиями. .nav > li > a -это именно тот элемент в котором находиться padding : 15px 14px ; Нам нужно эту строку найти в таблице стилей. Вам даже есть подсказка style.css:520 это значит она находиться в файле style.css и строка номер 520.
Приведу еще пример:
Будем менять цвет.
Нажимаем правой кнопкой мыши в нужную нам область и смотрим код.
Мы видим что этот одел покрашен в синий цвет. background
: #3b8dbd
; Мы для теста прямо на месте можем изменить цвет. После чего как подобрали нужный цвет ищем.s1 .sidebar-toggle в таблице стилей и находим.
Здесь видно background : #3b8dbd ; это и есть наш цвет в ввиде кода. нам нужно будет просто изменить его на наш цвет и сохранить изменения.
На этом пока все. Теперь вы можете изменять любые элементы. Если у вас возникнет сложности я могу продемонстрировать и редактирование других областей. Смотрите продолжение статьи.
При работе на компьютере в Windows может возникнуть ситуация, когда какой-либо файл нужно открыть одной программой, а он автоматически всегда открывается не той, которая нужна. Но если программу для открытия файлов можно сразу же выбрать, то в случае открытия ссылок всё сложнее. К примеру, кликаете по ссылке, которая пришла вам в Skype, а ссылка открывается не том браузере, где вы бы хотели её открыть, а в каком-то другом. Так происходит из-за того, что изначально для открытия ссылок в Windows настроен другой браузер, он установлен как программа по умолчанию для этого действия. Тоже самое касается любых программ, потому что для каждой программы можно назначить тип файлов, которые она будет всегда открывать. В данной статье на примере Winodows 7 и 10 я покажу, как настроить программы по умолчанию для открытия файлов определённого типа, а также ссылок.
Примеры для Windows 8 в этой статье рассматриваться не будут, потому что там делается всё точно также как в Windows 7 или в Windows 10.
Быстрый выбор программы для открытия нужного файла в любой Windows
Самый простой способ выбрать программу для открытия файла - это проводник Windows. Работает одинаково во всех версиях Windows.
При таком способе вам придётся выбирать программу для открытия файла каждого типа. К примеру, вам придётся отдельно выбрать программу для открытия картинок в формате.JPG, затем отдельно туже программу для картинок формата.PNG и всех остальных форматов, которыми пользуетесь.
Вам нужно нажать правую кнопку мыши (далее «ПКМ») на файле, для которого вы хотите выбрать стандартную программу, которая будет его открывать всегда. Во всплывающем меню выберите «Открыть с помощью» и справа появится список основных программ (1), через которые можно открыть данный файл. Если нужная программа для открытия вашего файла в списке есть, то нажав на неё, файл откроется в ней.
Такое действие откроет файл в выбранной вами программе лишь единожды. В следующий раз программу придётся выбирать заново.
Чтобы сохранить нужную программу для открытия выбранного типа файла на постоянной основе или же, если если нужной программы в списке №1 нет, а вы знаете, что она на компьютере точно установлена, то нажмите «Выбрать другое приложение» (2).
В открывшемся окне в списке (1) будет указаны все программы, которые могут открыть данный файл. Выберите нужную из списка. Если вы хотите сохранить выбранную программу для всех файлов такого же типа (чтобы все аналогичные файлы всегда открывались сразу же в этой программе), то поставьте галочку «Всегда использовать это приложение …» (2).
Таким образом вы можете назначить программу по умолчанию для любого типа файла.
Данный способ не удобен только тем, что для каждого типа файла приходится вот так вручную назначать программу, даже если разные типы файлов может открывать одна и та же программа.
Назначение программ по умолчанию сразу для всех типов файлов и протоколов через параметры Windows
Параметры Windows позволяют назначить программы по умолчанию сразу для всех типов файлов, которые программа способна открывать. Также только через параметры Windows можно настроить программы, которые будут использоваться для работы с определёнными протоколами, например, чтобы все ссылки открывались только в определённом браузере.
Ниже будет показана подробная инструкция на примере Windows 10. Настройки для Windows 7 очень похожи и будут рассмотрены кратко имеются лишь небольшие отличия, в основном по интерфейсу). Настройки для Windows 8 полностью идентичны настройкам Windows 7.
Откройте поиск Windows и наберите запрос «Программы по умолчанию» после чего выберите найденный параметр «Программы по умолчанию» из результатов поиска и откройте его.
Информация о том, как пользоваться поиском Windows находится вот
В списке будут отображено, какая из программ что именно открывает, например, какая программа используется в качестве видео проигрывателя, какая является веб-браузером и пр.
Здесь вы можете переназначить программы для выполнения определённых действий и для открытия определённых файлов. Для этого нужно кликнуть по уже назначенной для какого-либо действия программе и выбрать из списка другую (если программа никакая не назначена, то нажмите кнопку «+»). К примеру, вы хотите выбрать другой браузер по умолчанию, для того чтобы все ссылки из других программ открывались только через него. Для этого под заголовком «Веб-браузер» кликаем по уже назначенному браузеру (если не назначен, нажмите «+») и из списка (2) выбираем тот браузер, который нам нужен, через который вы хотите открывать все ссылки.
Настройка программ для открытия файлов определённого типа
Также вы можете задать программы по умолчанию для открытия файлов определённого типа.
Аналогичная процедура описывалась выше с тем лишь отличием, что в параметрах вы сразу же в одном месте сможете назначить программы для всех типов файлов, а не по одиночке через проводник.
Для перехода к параметрам для выбора программам, открывающих определённые типы файла, нажмите на ссылку «Выбор стандартных приложений для типов файлов».
На открывшейся странице в колонке слева (1) будут отображаться все возможные типы файлов в Windows, а справа (2) напротив каждого типа файла будет отображена программа, открывающая эти файлы. Если программа для какого-то типа файла не назначена, то вы можете назначить её, кликнув по кнопке «+» (3).
Настройка программ для открытия сразу всех типов файлов и протоколов, которые она способна открывать
Можно настроить нужные программы так, чтобы они открывали всё что можно при помощи них открыть. Однако с этим вариантом настройки нужно быть внимательным, потому что может получиться так, что, файлы некоторых типов станут открываться не в той программе, в которой вам бы хотелось.
К примеру, если для браузера Google Chrome выставить сразу все файлы и протоколы, которые он может открывать, то может получиться так, что, допустим, файлы PDF станут открываться не в привычной программе Acrobat Reader, а в Google Chrome. Такое возможно из-за того, что Google Chrome тоже может открывать файлы PDF, а вы как раз настроили этот браузер так, чтобы он открывал всё что мог.
Чтобы настроить нужные программы на открытие сразу всех файлов и протоколов, которые они только способны открывать, перейдите в подраздел «Задать значения по умолчанию по приложению».
Затем в списке слева (1) выберите программу, для которой хотите установить по умолчанию для открытия сразу всего что она способна открывать. В столбце справа нажмите «Использовать эту программу по умолчанию» (2).
На примере Windows 7
В Windows 7 «Программы по умолчанию» для настроек программ по каждому типу открываемых файлов можно также найти через поиск Windows, набрав тип запрос «Программы по умолчанию».
В Windows 7 окно «Программы по умолчанию» выглядит так:
Для выбора программ для выполнения определённых действий в системе нужно открыть «Настройка доступа программ и умолчаний».
В открывшемся окне нужно открыть категорию «Другая» вы ниже в списке назначить нужные программы для каждого действия.
Чтобы задать программы для открытия определённых типов файла, то в разделе «Программы по умолчанию» откройте пункт «Сопоставление типов файлов или протоколов конкретным программам».
В окне остаётся назначить нужные программы для открытия нужных типов файлов. Для этого выбираете тип файла из списка (1) и нажимаете «Изменить программу» (2).
Для того чтобы задать нужные программы по умолчанию для открытия всех файлов, которые она способна открывать и для всех протоколов, откройте подраздел «Задание программ по умолчанию».
В списке слева выбираете нужную программу (1), а затем справа нажимаете «Использовать эту программу по умолчанию» (2).
Заключение
Умение устанавливать программы по умолчанию для открытия тех или иных файлов позволит вам легко решить возможные проблемы в Windows, когда, к примеру, ссылки из Скайпа или каких-то других программ открываются не в том браузере. Или же какие-то видео файлы открываются не через тот проигрыватель. Инструкции выше помогут сопоставить нужные программы с нужными файлами, чтобы всё было так как вам удобно.
На этом всё! Хорошего вам дня и отличного настроения! ;)
Визуальный редактор WordPress – инструмент, с помощью которого выполняется размещение/редактирование записей с последующей публикацией их на блоге. На начальной стадии развития Вашего ресурса именно его будете использовать очень часто, вскоре освоив все нюансы работы с редактором в совершенстве
Чтобы запустить визуальный редактор нужно в виджете “Записи”, он размещен в верхнем левом углу администраторской панели блога, кликнуть по ссылке “Добавить новую”. Откроется окно, в котором все будет готово к набору текста Вашей новой записи.
Настройка визуального редактора wordpress .
Откройте Ваш профиль(виджет “Пользователи”) – снимите флажок напротив пункта “Отключить визуальный редактор”
Кликнув по ссылке “Все записи” открывается панель “Записи”, вид которой можно настроить. Кликнув по ссылке “Настройки экрана” разворачивается панель(1), на которой выведены названия виджетов, которые могу активировать или запретить их к показу(2).
Панель настраиваю таким образом(выставлены флажки): после вывода названия записей(по умолчанию), вывожу название рубрик, количество комментариев и просмотров(Views), дату публикации, title (заголовок), description (описание)(2). Вывод последних двух виджетов возможно только после установки плагина All In One SEO Pack , количество просмотров выводиться плагином WP-PostViews . Количество опций в панели настройки может изменяться в зависимости от установленных плагинов на блоге.
Я могу настроить отображение виджетов и самого визуального редактора в 1 или 2 колонки, само окно редактора и виджет “Опубликовать” являются активными по умолчанию. Настройка виджетов визуального редактора:
- инструменты SEO – доступен после установки плагина All In One SEO Pack, который позволяет прописать мета теги к каждой записи, настроить запрет/разрешить ее индексировать поисковыми системами(4).
- настройка маскировки ссылок – виджет доступен после установки плагина WP No External Links (5)
- виджеты рубрик и меток – позволяет привязать запись к одной или нескольким рубрикам или меткам. Уже год следую жесткому правилу: один пост = одна рубрика и ни одной метки. Это защищает блог от искусственного и бесполезного наращивания страниц.(6 — 7).
- цитата (8) – только недавно узнал о том, что с помощью заполнения поля цитата можно организовать вывод оригинальных анонсов. Вот только не все шаблоны позволяют это реализовать.
- когда Вы проставляете ссылку на страницу какого-то ресурса можете вписать ее адрес в форму и отправить сообщение его автору. По умолчанию приходят сообщения Вам на почту после сохранения/редактирования записи(9)
- произвольные поля(10) – задействованы в работе некоторых плагинов и хаков. К примеру, автоматически создаются плагином WP-PostViews, выводя количество просмотров статей(вы можете искусственно их накрутить тогда, когда реализован их вывод в активированном шаблоне на блоге. Плагин WP No External Links создает свое поле. Иногда для работы плагина Related Posts Thumbnails приходится создавать произвольное поле в ручную.
- обсуждение или комментирование – выводятся все комментарии к одной конкретной статье(11), если конечно читатели их напишут.
- Виджет Ярлык – выводятся латинские слова через дефис, на их основе формируется ЧПУ – адрес, если конечно же Вы активировали нужную опцию на блоге. На первых порах проконтролируйте создание ярлыков, чтобы вовремя исправить непредвиденные ошибки в формировании адресов.
Работа с визуальным редактором wordpress
Заполняю поле названия(13). Чаще всего ввожу в него ключевую фразу, которую использую для оптимизации материала, что позволяет сформировать короткие адреса страниц (нужный мне заголовок помещаю в окно после сохранения статьи).
Перемещаю курсор мыши в поле визуального редактора(14), при активной вкладке “Вазуально”(15), вставляю заранее набранный текст записи из редактора NotePad++ . Никогда не набираю текст в визуальном редакторе wordpress, так как может пропасть связь с сервером, заглючить ОС либо какая-то программа, отключиться питание компьютера. Из-за этого приходиться работу с начала либо с последней сохранённой копии либо надеется, что будет сохранен черновик. И редакции записей, которые создаться движком, мало чем помогут. Тем более многие блоггеры их создание отключают.
Текст набираю в визуальном редакторе Word, с помощью которого можно также выполнять первичное размещение материалов на блог , избавить текст от орфографических и пунктуационных ошибок. Копирую его в окно редактора NotePad++, затем вставляю в окно визуально редактора Wordprpess (14).
Далее проводиться работа по форматированию текста: разбитие на абзацы, выделение фраз курсивом, жирным, выравнивание относительно левого поля, вставляется тег more. Базовый визуальный редактор wordpress весьма скуден по возможностям(16), все они давно знакомы пользователям того же блокнота или Word.
- отправить набираемый тексn в черновик достаточно не сохранив запись закрыть вкладку браузера в котором отрыто окно визуального редактора, либо сразу же опубликовать материал(20). Кликнув по ссылке “Изменить”(17) оправить материал на утверждение. Полезно только для тех, кто имеет статус ниже, чем статус администратора.
- определить видимость записи – будет ли он доступен только админу – личное, защитить паролем – если на ресурсе одобрена регистрация пользователей, имеется возможность выводить анонс записи в начале ленты новостей и она не будет перемещаться по ней в низ, после публикации последующих материалов(21).
- существует возможность публикации записи сразу же после размещения текста в окне (22), но я всегда назначаю публикацию через час(выполняю планирование статьи) . Чуть ниже размещена кнопка “Планировать/Опубликовать”(19). После нажатия на ней, запись помещается в базу данных CMS WordPress и используется для генерации страницы.
Нужно обязательно привязать запись хоть к одной рубрике (18), иначе после клика по кнопке “Опубликовать” она будет размещена в рубрике, которая определена в настройках по умолчанию, как основная.
Чтобы узнать какая именно рубрика является основной перейдите во вкладку “Настройка публикации”, которая вызывается ссылкой, размещенной в виджете “параметры”.
Как определить мета-теги записи в визуальном редакторе wordpress
Обновлённая версия плагина All In One SEO Pack позволяет не только определить метатеги title (23), description (24), ключевые слова(25), но и подогнать их длину к принятым стандартам. Кроме того, Вы можете определить будет ли конкретная страница закрыта от индексации Яндексом или Google (26).
Чуть выше расположено окно, в котором можно попробовать настроить оформление блока, который будет находиться в поисковой выдаче с этой страницей(27). Задумка в следующем: вы прописываете заголовок(23), после сохранения он отображается в виджете, как бы показывая сколько знаков в прописанном title будет доступно поисковым роботам. Так же настраивается видимая часть сниппета. К сожалению он формируется плагином на основе заполненного поля “Описания записи”. Если поля виджета оставить пустыми, то в качестве заголовка выводиться название статьи 13, сниппет не формируется.
Определить адрес страницы в визуальном редакторе wordpress
Как только в визуальном редакторе блога на WordPress разместили заголовок и перешли к размещению текста, выполняется формирование sef-ссылки по правилам, которые вы сами определили(28).
Ярлык, который используется для этого, можете увидеть в вышеописанном виджете(12)
Вы сможете отредактировать адрес страницы, кликнув по кнопке “Изменить”, прописав ярлык латинскими буквами слова, разделив их черточками. В основу ярлыка может взят перевод название записи на английский язык, в моем случае WordPress-Visual-Editor. После сохранения записи(19), можете вместо короткого названия вставить длинное, завлекающее читателей название статьи, sef-ссылка уже не изменится. Если же это проделать до сохранения записи, то ее адрес сформируется на общих правилах.
HTML-редактор WordPress
Как такового HTML редактора нет, представлен некое его убогое подобие, чтобы его вызвать просто кликните на ярлыке “Текст”, он находиться возле вкладки “Вазуально”(15). В это окно можете вставлять код видео, взятого на странице Youtube , шоткод используемого плагина на блоге, как пример приведу NextGEN Gallery .
Как вставить разделитель записи в визуальном редакторе.
Каждый пост состоит из двух частей: анонса и полной версии, разделяет их тег more, вставить в запись можно нажав иконку “Разделитель”(29), либо переведя редактор в режим “Текст” и вставить следующий тег:
- — анонс отображается в начале полной версии статьи
- то же, что и первый вариант, только анкором ссылки more будет текст “Как беситься правильно”
- — анонс не является частью статьи
- то же, что и третий вариант, только анкором ссылки more выступает индивидуально заданный текст “Как создать блог”
Как редактировать уже созданную запись на блоге
кликнув по названию любого материала открыть его для редактирования, этого можно добиться, если перейдете по ссылке “Изменить”
Вот и все, что я желал написать о визуальном редакторе wordpress. А вот как вставить изображения в записи напишу в следующий раз.
Редактор, который использует Git, выбирается из следующего списка, именно в этом порядке (из man git-commit):
- Значение переменной окружения GIT_EDITOR
- Значение в конфигурации Git core.editor . Используется обычный для Git приоритет настроек:
- --local - для данного проекта.
- --global - для данного пользователя. Логично настраивать редактор именно на этом уровне.
- --system - для этой рабочей машины (в рамках ОС).
- Значение переменной окружения VISUAL
- Значение переменной окружения EDITOR (зачем столько переменных?)
- Если все эти варианты не установлены, то использует Vi/Vim.
2. Зачем -w ?
Зачем в большинстве приведенных команд параметр -w (--wait)? Git открывает редактор и ждет возврата exit code , чтобы продолжить работу на основе данных в файле. Если этого параметра нет, Git будет продолжать работу сразу и не дождется, когда вы отредактируете и сохраните файл.
W, --wait Wait for window to be closed before returning.
3. Настройка через изменение core.editor .
Не требует прямого редактирования файлов и обладает гибкостью в уровнях настройки. Минус в том, что остальные приложения продолжат использовать редактор по умолчанию.
В общем виде настройка конфигурации выглядит так:
Git config --global core.editor "editor --parameters"
3.1 Linux, OS X
Многие редакторы (Atom, TextWrangler и другие) не включают поддержку командной строки при установке. Их необходимо включить отдельно, найдя в меню команду Install Shell Commands .
Эти строки можно сразу копировать и выполнять в терминале:
Git config --global core.editor "atom -w" git config --global core.editor "subl -n -w" git config --global core.editor "mate -w" git config --global core.editor "edit -w" git config --global core.editor \ ""C:/Program Files/Notepad++/notepad++.exe" -multiInst -notabbar -nosession -noPlugin"
Notepad++, на 64-битной ОС:
Git config --global core.editor \ ""C:/Program Files (x86)/Notepad++/notepad++.exe" -multiInst -notabbar -nosession -noPlugin"
Системные настройки визуального редактора производятся в настройках модуля Управление структурой (Настройки > Настройки продукта > Настройки модулей > Управление структурой ) на закладке Визуальный редактор .
Первой опцией в настройках визуального редактора является выбор самого редактора. Вы можете пользоваться новой версией редактора, либо вернуться к
старой (до версии 9.5)
Старый редактор не рекомендуется при использовании последних версий продукта, т. к. многие функции могут быть ограничены, например, проверка орфографии. Кроме того, форматирование сохраненного текста может существенно отличаться при переходе от старого редактора к новому и наоборот.
. Здесь и далее мы будем иметь в виду и описывать новую
версию. С работой в старой версии Вы можете ознакомиться в курсе
Интерфейс до версии 9.5.
Рассмотрим внешний вид редактора и его панели подробнее. Визуальный редактор, открываемый из
Публичной части и из Административного раздела несколько различается по функционалу.
Будем описывать окно редактора в Административном разделе, т.к. в нем доступен
несколько более широкий набор кнопок и возможностей, чем в Публичной части.
Визуальный редактор предоставляет возможность проверки орфографии введенного текста только с помощью pSpell (проверка производится в браузере, при условии если pSpell установлен на сервере).
Для того, чтобы визуальный редактор мог использовать это расширение, его надо подключить. Для этого нужно зайти в Настройки > Настройки модулей > Управление структурой > Визуальный редактор .
|
|