Создаем тему для Wordpress на основе нашего макета

⇐ ПредыдущаяСтр 15 из 15

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

- Необходимо все наши стили перенести в общий файл стилей style.css и внести информацию о версии темы и общей информации (Листинг 3.5).

- Установить плагин Contact-7 для обработки запросов, и установки формы на сайте, если клиент захочет выбрать услугу или забронировать домик.

- Описать все основные файлы системы управления контентом: index.php, footer.php, functions.php, header.php, index.php, page.php, search.php, sidebar.php, single.php.

-
Сделать скриншот темы и прикрепить его в файл темы сайта screenshot.png (Рисунок – 3.2).

Рисунок 3.2 – Скриншот темы.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Jack Schofield. The story of the web Celebrating 25 years of the World Wide Web, 2014.

2. А.Матросов, А.Сергеев, М.Чаунин. HTML 4.0 в подлиннике, 2008.

3. Д. Макфарланд. Большая книга CSS3, 2014.

4. И. Севостьянов. Поисковая оптимизация. Практическое руководство по продвижению сайта в интернете, 2014.

5. WordPress для профессионалов. Разработка и дизайн сайтов, 2008.

6. С. Г. Горнаков. Осваиваем популярные системы управления сайтом (CMS). – М.: ДМК Пресс, 2009. – 336 с.

ПРИЛОЖЕНИЯ

Листинг 1.1

body{ width: 896px; height: 100%; min-height: 100%; margin:0 auto; padding: 50px 48px 0; line-height: 1; color: #333; background: #fff; font-family: ff-tisa-web-pro, Georgia, sans-serif; -webkit-text-size-adjust:100%; }

Листинг 1.2

<div class="columns"> <div class="one-third"> … сюда помещается содержимое… </div> <div class="two-thirds"> … сюда помещается содержимое… </div> </div>

Листинг 1.3

.columns { width: auto; /* то же самое что и 100 % */ max-width: 1200px; } .columns:after { content: ""; display: table; clear: both; } .one-third { float: left; width: 33%; } .two-thirds { float: left; width: 67%; }

Листинг 2.1

THEME NAME: MyTheme THEME URI: http://www.mirmillo.com/mytheme/ DESCRIPTION: Theme for my new site. Based on Twenty Eleven. VERSION: 1.0 AUTHOR: David Damstra (and friends) AUTHOR URI: http://mirmillo.com/author/ddamstra License: GNU General Public License v2 or later License URI: http://www.gnu.Org/licenses/gpl-2.0.html Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready */

Листинг 2.2

<?php if (have_posts()):?> <?php twentyeleven_content_nav('nav-above');?> <?php /* начинается цикл */?> <?php while (have_posts()): the_post();?> <?php get_template_part(’content', get_post_format());?> <?php endwhile;?> <?php twentyeleven_content_nav('nav-below');?> <?php else:?>

Листинг 3.1

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, code, form, div, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; } fieldset, img { border: 0; } /* remember to define focus styles! */ :focus { outline: 0; } address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: normal; font-weight: normal; } #blog_title,.post_title,h1,h2,h3,h4, h5, h6 { font-size: 100%; font-weight: normal; } abbr, acronym { border: 0; font-variant: normal; } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } code, kbd, samp, tt { font-size: 100%; } /*@purpose To enable resizing for IE */ input, button, textarea, select { font-size: 100%; } body { line-height: 1.2; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; } sup, sub { font-size: 100%; vertical-align: baseline; } /* remember to highlight anchors and inserts somehow! */ ins { text-decoration: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

Листинг 3.2

body { color: #000; background: #CDD9F3 url(images/body_bg.gif) center top repeat-y; font-family: Verdana, Geneva, sans-serif; } a,.post a { text-decoration: none; color: #000; } a:hover,.post a:hover { color: #900; text-decoration: none; } #blog_title,.post-title,h1,h2,h3,h4 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } blockquote, code { color: #333; font-family: Verdana, Geneva, sans-serif; border: 1px dashed #999; } blockquote { background: #F8F4AB; } code { background: #F5D582; }

Листинг 3.3

#wrapper { min-width: 998px; /* not working in IE6 */ overflow: hidden; background: url(images/container_bg.jpg) repeat-y center top; } #bottom_frame { padding: 0 0 5px 0; background: url(images/bottom_frame.jpg) no-repeat center bottom; } #top_frame { background: url(images/top_frame.jpg) no-repeat center top; } #top_container { margin: 0 auto; background: url(images/top_container.jpg) no-repeat center 288px; } #header, #container, #footer { width: 998px; } #header { height: 288px; } #container { min-height: 900px; padding: 0px 0 20px 0; } #footer { clear: both; height: 45px; position: relative; }

Листинг 3.4

/* Footer */ .credit { font-size: 1.1em; text-align: center; padding: 0px 100px 0px 100px; } .credit,.credit a,.credit a:hover { color: #FFFFFF; } /* Header */ #header #blog_title { font-size: 3em; /* Blog Title */ padding: 36px 200px 0px 368px; text-align: left; } #header h2 { font-size: 1.4em; /* Blog Description */ text-align: left; padding: 0px 200px 0px 370px; } #header #blog_title, #header #blog_title a, #header h2 { color: #D67C00; } /* menu */ #menu { width: 624px; height: 26px; position: absolute; left: 80px; top: 247px; overflow: hidden; } #menu ul li { padding: 0 12px; font-size: 1.4em; /* Menu Font Size */ font-weight: bold; text-align: center; float: left; } #menu ul li a { padding: 0px 0 0px 0px; line-height: 2; color: #FE8E02; } #menu ul li a:hover { color: #06c; } #menu ul ul li { font-size: 1em; } /* searchform */ #searchform { overflow: hidden; position: absolute; left: 710px; top: 125px; } .searchtext { width: 198px; color: #000; border: 0; font-size: 1.2em; background: url(images/spacer.gif); padding: 0; margin: 5px 6px 0px 0px; float: left; } #searchsubmit { border: 0; margin: 0 0 0px 0; width: 30px; height: 30px; float: left; } #rss { position: absolute; left: 59px; top: 121px; } #rss img { width: 42px; height: 50px; } /* Content */ #content { width: 631px; padding: 0px 0px 0 0px; display: inline; margin: 0 0 0 70px; float: left; } .post { padding: 0px 0 0px 0; margin: 0px 0 0px 0px; } .post.post_bg { background: url(images/post_bg.png) left top repeat-y; } .post.post-title { margin: 0px 0px 0 0px; padding: 24px 20px 15px 67px; font-size: 1.4em; /* Post Title */ background: url(images/post_header_bg.png) no-repeat; overflow: hidden; } .post.post_bottom { background: url(images/post_bottom_bg.png) no-repeat left bottom; padding-bottom: 18px; width: 631px; } .post.post-title a { color: #D46D00; } .post.post-title a:hover { color: #900; } .edit_post { width: 83%; color: #333; margin: 0 auto; margin-top: 10px; padding: 5px 10px; background: #ffc; border: 1px dashed #999; } .edit_post a { font-style: italic; color: #33C; } .edit_post a.post-edit-link { margin-right: 15px; font-style: normal; color: #E5631C; text-decoration: underline; } .edit_post a:hover.post-edit-link { color: #33c; } .post_path span { color: #706ED6; } .post_path a:hover { text-decoration: underline; } .postmetadata a { text-decoration: underline; } .entry { width: 547px; overflow: hidden; margin: 0 auto; padding: 10px 0; font-size: 1.2em; } .entry a { color: #1f85da; text-decoration: underline; } .tags,.tags a,.postmetadata,.postmetadata a { color: #0A1117; } .post_path { font-size: 1.1em; margin: 0 0 0 42px; padding: 7px 27px 12px 15px; background: url(images/arrow.gif) left 10px no-repeat; } .postmetadata { padding: 12px 42px 0 42px; text-align: left; font-size: 1.1em; } .tags { font-size: 1.2em; margin: 10px 30px 0 42px; } .tags a { text-decoration: underline; } .read_comments { margin: 0px 42px 0 0px; text-align: right; padding: 17px 0px 17px 42px; } .bookmark { margin: 18px 0 0 42px; } .wp-pagenavi { padding: 5px 36px 5px 42px; line-height: 20px; } .post-footer { padding: 10px 42px; } .read_comments a { font-size: 1.2em; color: #0A1117; padding: px 0px px 6px; } .read_comments a:hover { color: #a00; } .notfound { margin: 100px auto; text-align:center; font-size: 4em; font-weight: bold; color: #7e2d17; } /* welcome */ #welcome { color: #FDF2E0; font-size: 11px; padding: 0px; position: absolute; left: 776px; top: 191px; } #welcome p { width: 171px; height: 122px; padding: 0px 0 0px 0px; overflow: hidden; } /* Sidebar */ #sidebar { width: 240px; display: inline; padding: 40px 0px 252px 0px; margin: 0px 55px 0px 0px; overflow: hidden; float: right; position: relative; color: #302E2C; } #sidebar_main { padding: 0px 0 0px 0; margin: 0px 0 0 0; } #sidebar_main h2 { padding: 13px 30px 30px 70px; font-size: 16px; color: #774A2B; position: relative; background: url(images/sidebar_header_bg.png) no-repeat left 3px; } #sidebar_main ul li { overflow: hidden; font-size: 1.2em; padding: 3px 0 50px 0px; background: url(images/sidebar_li_bottom.png) no-repeat left bottom; } #sidebar_main ul li a { color: #302E2C; } #sidebar_main ul li a:hover { color: #a00; } #sidebar_main ul ul { padding: 0 0 0 35px; background: none; background: url(images/sidebar_mian_li_bg.png) repeat-y left top; } #sidebar_main ul ul.menu { background: none; padding-left: 8px; } #sidebar_main ul ul li { font-size: 1em; border: none; padding: 4px 0px 4px 18px; background: url(images/sidebar_li.gif) no-repeat left 12px; position: relative; width: 151px; word-wrap: break-word; overflow: hidden; } #sidebar_main ul ul ul { padding: 0; margin: 0; background: none; } #sidebar_main ul ul ul li { font-size: 1em; margin: 0; width: 80%; } #sidebar_main.textwidget { margin: 0px 0; } #sidebar select { font-size: 1em; margin: 0px 0; width: 88%; margin-left: 12px; } #sidebar ul li div,#sidebar_ul li object { padding: 0 35px 0px 30px; } #sidebar ul li div { background: url(images/sidebar_mian_li_bg.png) repeat-y left top; } #sidebar ul li div div { padding: 0; } /* PageNavi*/ .wp-pagenavi a { padding: 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #06c; color: #06c; background-color: #fff; } .wp-pagenavi a:hover { border: 1px solid #000; color: #000; } .wp-pagenavi span.pages,.wp-pagenavi span.current,.wp-pagenavi span.extend { padding: 2px 4px; margin: 2px; border: 1px solid #000; color: #000; background-color: #fff; } /* Calendar */ #wp-calendar { empty-cells: show; margin: 0px auto 0; margin-bottom: 15px; width: 100%; color: #601006; } #wp-calendar #next a { padding-right: 10px; text-align: right; font-size: 11px; } #wp-calendar #prev a { padding-left: 10px; text-align: left; font-size: 11px; } #wp-calendar a { display: block; font-weight: bold; text-decoration: none; } #wp-calendar a:hover { background: #fc0; color: #000; } #wp-calendar caption { text-align: center; padding-bottom: 10px; width: 100%; font: bold 13px Verdana, Arial, Sans-Serif; } #wp-calendar td { text-align: center; padding: 3px 0; font-size: 12px; text-align: center; } #wp-calendar th { text-align: center; font-style: normal; font-size: 12px; text-transform: capitalize; } /* Social Bookmarking */ .bookmark ul { display: inline; } .bookmark ul li { background: none; display: inline; list-style-type: none; } .bookmark_line img { border: 0; } /* Comments */ h3#comments { padding: 0 0 0 46px; } h3#comments, #respond h3 { padding-top: 10px; font-size: 1.4em; color: #333; } #commentform { margin: 5px 0 0 0px; } #commentform input { width: 170px; padding: 2px; margin: 5px 5px 1px 0; font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif; } #commentform textarea { width: 98%; padding: 2px; font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif; } #commentform p { margin: 5px 0; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; } #commentform #submit { margin: 0 0 5px auto; float: right; } #respond { width: 85%; padding: 0 0 0 10px; color: #333; margin: 0 auto; } #respond:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .commentlist { padding: 0 0 0 0px; margin: 0 auto; width: 85%; } .commentlist li { margin: 15px 0 0px; padding: 5px 5px 10px 10px; list-style: none; font-weight: bold; font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif; } .commentlist li ul li { margin-right: -5px; margin-left: 10px; font-size: 1em; } .commentlist p { margin: 10px 5px 10px 0; font-weight: normal; line-height: 1.5em; font-size: 1.2em; text-transform: none; } .commentlist li.avatar { float: right; border: 1px solid #333; padding: 2px; background: #fff; } .commentlist li a { color: #000; } .commentlist cite,.commentlist cite a { font-weight: bold; font-style: normal; font-size: 1.2em; } #content.comment-body p a { text-decoration: underline; } .nocomments { text-align: center; } .commentmetadata { font-size: 1.2em; display: block; font-weight: normal; } .thread-alt { background-color: #dcbea4; } .thread-even { background-color: #e3cbb3; } .depth-1 { border: 1px solid #000; } .alt { border-left: 1px solid #666; /* odd page */ background-color: #C29581; padding: 10px; } .even { border-left: 1px solid #666; /* even page */ background-color: #D0AD9E; }

Листинг (3.5)

Theme Name: Agro Theme URI: Agro-turism.by Description: Тема агро-туризма Version: 1.0 Author: Name Author URI: http://test.ru/

⇐ Предыдущая 6 7 8 9 10 11 12 13 1415

Date: 2016-06-06; view: 532; Нарушение авторских прав; Помощь в написании работы --> СЮДА...

mydocx.ru - 2015-2024 year. (0.006 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию