Jump to content
  • 0

HTML & CSS готовы, а как из этого сделать тему для WordPress?

aov000

Asked by aov000,

 Share

Question

aov000 Explorer

aov000

Posted
Posted (edited)

Неделю рыщу в поисках толковых пояснений как же всё-таки сделать из обычной верстки (из 2х html и 2х css) тему для Wordpress.

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

Поиском пользовался, но в 90% толкового ничего нет. Так же читал кодекс вордпресс (особо не понял т.к. англ яз плохо знаю).Фразы типа:"этот код вставьте в тот файл" - не катят, т.к. сразу появляются вопросы "куда именно вставлять? кусок кода" и как быть с необычным расположением?

image_4f7e091d86e7f.jpg

Ещё есть такой момент как разные страницы, главная и все остальные на которых будут размещаться посты(инфа). По факту у меня два html и css

Буду признателен за помощь, и толковые советы.

Edited by aov000
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
hypnocolor Explorer

hypnocolor

Posted
Posted

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

Codex, кстати, есть и на русском. Вот, например. Но английский лучше подтянуть — без него далеко не уедешь.

Link to comment
Share on other sites
  • 0
aov000 Explorer

aov000

Posted
  • Author
Posted

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

Codex, кстати, есть и на русском. Вот, например. Но английский лучше подтянуть — без него далеко не уедешь.

Кодекс я уже прочитал всё что есть на русском, но много ссылок ведущих на англ.яз - и в этом месте начинается ступор(не понимаю). :dash:

+ то что я нарисовал, совсем не катит под стандартный шаблон сайта :(

Link to comment
Share on other sites
  • 0
hypnocolor Explorer

hypnocolor

Posted
Posted

aov000, Да дизайн у вас может быть какой угодно. Можно выделить несколько основных правил и от них отталкиваться:

1) стандартные файлы. Структуру вашего HTML-шаблона надо разбить по файлам, которые вместе составляют шаблон для Вордпресса (404.php, header.php, footer.php и т.д.). Чтобы наверняка знать, какой файл за вывод какой информации отвечает, лучше официальной документации не поможет ничего. Кстати, там не такой уж и сложный английский, по-моему, даже на интуитивном уровне можно понять, что к чему;

2) стандартные функции Вордпресса. Необходимо проследить, чтобы в файлах шаблона присутствовал минимальный набор функций Вордпресса, отвечающих за формирование страницы и вывод данных. Есть функции, на которые стоит обратить особое внимание, чтобы потом не искать причину возникающих проблем. Например, функция wp_footer(), которая должна присутствовать в footer.php. Если она будет там отсутствовать, большинство плагинов для Вордпресса откажутся работать. Когда-то я потратил немало времени, чтобы узнать об этом)

В общем, тут, мне кажется, дело привычки. С ходу кажется тяжело и запутанно, но стоит пару раз подогнать шаблон для Вордпресса (с оглядкой на уже готовые шаблоны), и всё более-менее запоминается. А потом и вовсе можно сделать уже готовый свой шаблон-болванку, на основе которого можно будет клепать любую необходимую вам структуру, внося минимум изменений и тратя в разы меньше времени.

Link to comment
Share on other sites
  • 0
aov000 Explorer

aov000

Posted
  • Author
Posted

У меня появился следующий вопрос (смотрю видеоурок по созданию темы для ВП). Имеется два файла ЦСС, каким образом их можно соединить в один ЦСС файл для темы? Или этого делать нельзя? Или же существует другой способ?

Есть оформление главной страницы и всех остальных с постами.

Link to comment
Share on other sites
  • 0
hypnocolor Explorer

hypnocolor

Posted
Posted

aov000, объединять их можно. Просто скопируйте содержимое одного файла в конец другого, например. Несколько css-файлов логично делать, например, если стилей много, и нужно разбить их по файлам-категориям.

Например, в одном файле будут только стили для разметки и позиционирования, в другом — для оформления блоков, и так далее. Но никто не мешает хранить все стили в одном файле, делая комментарии перед каждой группой стилей, относящихся к какой-то своей области (стили для шапки, стили для блоков, стили для подвала и т.д.)

Короче говоря, вопрос индивидуального удобства для каждого верстальщика :)

Link to comment
Share on other sites
  • 0
aov000 Explorer

aov000

Posted
  • Author
Posted

aov000, объединять их можно. Просто скопируйте содержимое одного файла в конец другого, например. Несколько css-файлов логично делать, например, если стилей много, и нужно разбить их по файлам-категориям.

Например, в одном файле будут только стили для разметки и позиционирования, в другом — для оформления блоков, и так далее. Но никто не мешает хранить все стили в одном файле, делая комментарии перед каждой группой стилей, относящихся к какой-то своей области (стили для шапки, стили для блоков, стили для подвала и т.д.)

Короче говоря, вопрос индивидуального удобства для каждого верстальщика :)

Вот что у меня получилось: _http://dj-ars.com/ru/

Посты вообще не там где надо, и выводятся коряво :(

Народ посоветуйте - как с таким бороться. (исправлять буду своими силами)

Кстати может кому поможет, я нашёл урок вот тут _http://monsterart.ru/tutorials/wordpress.php (более-менее толково)

Link to comment
Share on other sites
  • 0
hypnocolor Explorer

hypnocolor

Posted
Posted

Ой.. почитайте для начала тут — http://htmlbook.ru/layout/fiksirovannaya-shirina-tri-kolonki, потом найдите какой-нибудь шаблон для Вордпресса с тремя колонками, и измените его под себя. Это сейчас, я думаю, самый действенный выход из ситуации.

Link to comment
Share on other sites
  • 0
aov000 Explorer

aov000

Posted
  • Author
Posted

Ой.. почитайте для начала тут — http://htmlbook.ru/layout/fiksirovannaya-shirina-tri-kolonki, потом найдите какой-нибудь шаблон для Вордпресса с тремя колонками, и измените его под себя. Это сейчас, я думаю, самый действенный выход из ситуации.

фигасе... не только мне не спиться! :)

Спасибо за столь быстрый ответ!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept