Для тех кто создает свои странички на сайте

[gus]

Тут я постараюсь написать подробную инструкцию с фото как делать свою страничку.
Тут так-же можно задавать вопросы.

[gus]

На примере страницы Сергея Плшешникова постораюсь показать как правильно создавать странички......
Как входить в админку и свои пароли все знают.

Итак открываем 2 странички - сам сайт и админку.

В админке видим нужную нам страницу для редактирования. При наведении курсора на саму страничку появляется меню:

Выбираем пункт "Измеить" и попадаем в редактирование страницы.

Тут выбираем СТРОГО закладку "Текст". Ни в коем случае не "Визуально" !!!!!!
Я конечно уже кое что подправил, но много еще и осталось того, что надо убрать....
Рзберем пример:

Я конечно все могу понять, но зачем ставить ссылку на Фейсбук? Логичнее было бы наоборот - на Фейсбуке ставить ссылку на свою страничку.....
Так как эта страничка делалась в режиме "Визуалньо", то программа, по каким-то своим разумениям начинает ставить то, что совершенно не нужо ставить.....

<a href="https://www.facebook.com/milliarder17" target="_blank" rel="noopener">

Вот код ссылки...... В самом конце мы видим - target="_blank" rel="noopener"

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

<a href="https://www.facebook.com/milliarder17" target="_blank">

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

Многие мне говорят что не понимают того что написано. Давайте разберемся!

<center><strong>Список рыб в моих аквариумах:</strong></center>&nbsp;

Тег <center> - означает что данная строка будет посередине. Центр, он и есть центр.....
<strong> - текст будет выделен толстым шрифтом.
Ну и если что-то было открыто, то оно должно быть и закрыто в том же порядке..... А вот дальше опять произвол самой программы....
&nbsp; - Зачем программа в конце строки поставила знак пустого символа (пробела), мне лично не понятно....... Он просто лишний!

[gus]

Идем дальше!
Загрузка изображений.
Тут надо поработать фотошопом..... Щас разберемся как это делать.
Фото бывают вертикальные и горизонтальные.... Стандартный размер фото 18х13. Из этого размера и будем исходить.
Любой фотоаппарат или смартфон делают фото большего размера для того, что-б можно было выбрать экспозицию, чуть поиграться с местом съемки и т.д.

Берем 2 фото:

Я специально взял и вертикальное и горизонтальное....
Смотрим на размеры фото....

Каждое фото больше 1,5 мегобайта. Это ОЧЕНЬ БОЛЬШИЕ ФОТО для сайта. Будем уменьшать!
Для начала в фотошопе приведем фото к требуемому размеру 18х13 или 13х18....

При сохранении выбираем качество "3".
Смотрим на размер файлов:

Смотрим и видим размер файлов уменьшился достаточно сильно! Это уже близко к требуемому размеру, но еще не совсем.....
Будем работать дальше!

[gus]

Если кто-то хочет оставить свою подпись на фото, то сейчас это сделать в самый раз......
Создаем в фотошопе файл с прозрачным фоном нужной нам надписью. Делаем надпись 2-х видов - черные буквы и белые.

Выделяем и создаем 2 файла под названием "черный" и "белый".....
Предупреждаю сразу, что Ваши фото находятся в формате .jpg,а файлы надписей создаем в формате .png. Только формат .png позволяет делать прозрачный фон!!!!! Высота букв 20 пикселей !!!!
Открываем наши 2 файла с надписями и файлы которые мы делаем:

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

Выделяем надпись мышкой, копируем с помощью Ctrl+C, переходим к нужному нам файлу и вставляем с помощью Ctrl+V.
При этом надпись появится в центре изображения. Для смещения в любую сторону нашей надписи, зажимаем клавишу Ctrl и не отпуская ее, мышкой тянем нашу надпись туда, куда нам надо.

Опять сохраняем полученный файл в формате .jpg с качеством "3".
Сразу хочу предупредить - расширение файла .jpg должно быть ТОЛЬКО маленькими буквами. В имени файла не должно быть русских букв. ТОЛЬКО ЛАТИНСКИЕ !!!!!!!
Некоторые фотоаппараты, такие как мой, делают имя русскими буквами, некоторые делают расширение большими буквами. Это все надо переименовать!!!!!!

Файлы переименовали!
По правилам работы в интернете, на страничке показаны только файлы предпросмотра, т.е. файлы очень маленького размера, а при клике на этот файл открывается файл нормального для просмотра пользователем.
Делаем именно так!
Для нашего формата странички выбираем размер по широкой стороне фото равным 230 пикселей.

Сохраняем полученный файл с тем-же именем которое у нас и было, но добавляем к нему любую понятную нам приставку.
Лично я добавляю к файлам 2 буквы "sm", т.е. "маленький"..... Для этого выбираем "сохранить как":

В итоге у нас получился маленький файлик предпросмотра:

Размер этих предпросмотровых файликов очень мал.
Теперь нам надо привести нормальные файлы к нормальному размеру. Для нашего сайта нормальный размер по широкой стороне 738 пикселей. Делаем!

Эти файлы просто сохраняем не меняя имени.
Все! Работа с изображениями закончена!
У нас получилось 4 изображения с оптимальными размерами по высоте и ширине и оптимального размера по объему файла.

Вот и получили те размеры по объему файлов, которые уже можно использовать на сайте.

[gus]

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

Слева в админке открываем закладку "Медиафайлы". Кликаем на "Добавить новый" и следом "Выберите файлы".
Выбираем созданные нами 4 файла....

Кликаем "Открыть", ждем.....и наши файлы появились на сайте. Но они еще не вставлены в страичку.
При клике на любой файл, справа у нас откроется путь к этому файлу.....

Это все что нам нужно!!!!!!!
Копируем эту ссылку в какой нибудь временный файл. Вернее это не сама ссылка, а только путь к этим файлам. Этот путь нам и понадобится на страничке!!!!!
Идем на редактирование нашей странички!

Вставляем в нужное место странички следующий код (мы его сейчас разберем по косточкам). )))))

<center>
<a href="http://sklik.world-fauna.com/wp-content/uploads/2017/07/img034.jpg" target="_blank"><img title="" src="http://sklik.world-fauna.com/wp-content/uploads/2017/07/img034sm.jpg" alt="" width="180" /></a>
</center>

Ну с <center> мы уже разобрались. Тут это значит что фото будет находиться по центру страницы.
Дальше идет ссылка на наше БОЛЬШОЕ фото. Ссылка начинается с "a href=". И дальше тот путь, который мы скопировали при заливке фото на сайт - "http://sklik.world-fauna.com/wp-content/uploads/2017/07/img034.jpg".
Обратите внимание, что ссылка взята в кавычки. ТАК И ДОЛЖНО БЫТЬ !!!! Без кавычек работать не будет!!!!!
Но мы можем чуть упростить эту ссылку. Сайт и так, без нашей подсказки знает что он http://sklik.world-fauna.com.
Именно эту часть и НУЖНО убрать из кода ссылки. В итоге у нас должно получиться:

"/wp-content/uploads/2017/07/img034.jpg"

Именно это мы вставляем в код приведенный выше:



<center>
<a href="/wp-content/uploads/2017/07/img034.jpg" target="_blank"><img title="" src="/wp-content/uploads/2017/07/img034sm.jpg" alt="" width="180" /></a>
</center>

После того как мы прописали БОЛЬШОЕ фото и то что оно должно открываться в новом окне (target="_blank"), мы вставляем код того, что должно показываться на экране.

<img title="" src="/wp-content/uploads/2017/07/img034sm.jpg" alt="" width="180" />

А на экране показывается маленькое фото с приставкой "sm" - маленькое.
Дальше идет непонятность в виде - alt="". Что это такое? А это то, что когда Вы наводите на картинку мышкой не кликая по самой картинке, у вас показывается какая-то надпись, т.е. это просто описание этого фото. Большим его делать нельзя!!!! Всего 2-3 слова!

<img title="" src="/wp-content/uploads/2017/07/img034sm.jpg" alt="Я и Вася на пляже" width="180" />

Примерно так! Хотя это поле можно оставить и пустым!
Дальше идет вообще что-то не понятное.....

width="180"

Это ширина нашей МАЛЕНЬКОЙ картинки!!!!! Помните что мы делали ширину равную 230 пикселей? Вот это оно и есть.
Только тут мы еще чуть-чуть, для того что-б в строку влезло 3 фото, еще уменьшим наше фото.
Для горизонтальных фото выбираем - 180, для вертикальных - 135.
ВСЁ!
Больше нам ничего не нужно делать.
Сохраняем этот код нажав справа в меню "Обновить".
Ваши картинки уже на сайте!

[gus]

Если возникли вопросы - спрашивайте! Отвечу!