Перейти к содержимому

Фотография

Создание своего шаблона страницы WP для Landing Page

wordpress landing page страница приземления целевая страница шаблон

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 18

#1 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 24 Январь 2014 - 19:27

Тема взяла начало отсюда...
 
Ниже приведу простой пример шаблона страницы WordPress для возможности создания целевых страниц. Прежде, несколько моментов:

  • Шаблон создавалась для WordPress 3.8.1. и для темы "Twenty Twelve" (одна из дефолтных тем WordPress).
  • Стили подгружаются от активной темы блога, их можно отключить в шаблоне страницы и прописать/подгрузить свои.
  • Убран вывод заголовка страницы, но он выводиться в title страницы и в шапке комментариев WP.
  • Контент для лендинга взят отсюда (бесплатная реклама), т.к. автор контента спрашивал о возможности создания подобного лендинга на WP. Спрашивал здесь.
  • Шаблон, как и сама страничка с примером лендинга, создавались на скорую руку... Больше для демонстрации, чем для красоты... Это не к  тому, что там всё плохо и неправильно, а к тому, что нет предела совершенству. Приведённый здесь пример вполне нормальный и рабочий.

 

И так:

1. Создаём php-файл и называем его, например, landing.php
 
2. Вставляем в этот файл данный код:

<?php
/*
Template Name: Лендинг
*/
?>
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title>
<?php wp_title( '|', true, 'right' ); ?>
</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<link rel='stylesheet' id='twentytwelve-style-css'  href='<?php echo get_template_directory_uri(); ?>/style.css?ver=3.8.1' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentytwelve-ie-css'  href='<?php echo get_template_directory_uri(); ?>/css/ie.css?ver=20121010' type='text/css' media='all' />
<![endif]-->
<script type='text/javascript' src='<?php get_site_url(); ?>/wp-includes/js/comment-reply.min.js?ver=3.8.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<?php get_site_url(); ?>/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="<?php get_site_url(); ?>/wp-includes/wlwmanifest.xml" /> 
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
  <div id="main" class="wrapper">
      <div id="content" role="main">
        <?php while ( have_posts() ) : the_post(); ?>
        <div class="entry-content">
          <?php the_content(); ?>
        </div>
        <?php comments_template( '', true ); ?>
        <?php endwhile; // end of the loop. ?>
      </div>
    </div>
</div>
</body>
</html>

...содержание данного кода собрано с разных файлов темы "Twenty Twelve" для возможности:

  • создавать и редактировать такие страницы в админке Wordpress
  • оставлять на лендинге комментарии Wordpress (которые, кстати, можно отключить/включить в админке)
  • чтобы страницы имели хоть какое-то стилевое оформление, которое, как я уже говорил выше, можно отключить и прописать своё.

Обязательно прописываем название шаблона страницы (Template Name) в начале файла, чтобы мы увидели его в адмике при создании страниц. В моём случае, это "Лендинг".

3. Заливаем этот файл в папку вашей темы. В моём случае это тема "Twenty Twelve" и шаблоны страниц находятся там в отдельной папке под названием "page-templates":
 
image_24012014-233214.jpg
 
4. При созданиии целевой страницы выбираем созданный нами шаблон:
 
image_25012014-002102.jpg
 
5.  В режиме редактора "Текст", в нужное вам место вставляем коды вставки комментариев Вконтакте и комментариев Facebook, удалив комментарии кода из кода.
 
Возможно, лучше воспользоваться каким-нибудь плагином для вставки комментов Вконтакте и Facebook, чтобы на каждой страницы они были уникальными и не приходилось для каждого лендинга генерировать уникальный виджет... Но у меня Вк-комменты и так для каждой страницы получаются уникальными, а Facebook-комментарии сваливаются со всех страниц в одну кучу... Проверьте у себя и то и другое, и если что, генерируйте для каждой страницы уникальный виджет, указав при создании полный url страницы... Или воспользуйтесь каким-нибудь плагином... Правда, в случае с плагином, придётся добавлять в шаблон страницы код, необходимый для работы плагина.
 
Ну вот, вроде, и всё... То, что получилось смотрите на скрине ниже.:

image_25012014-012124.jpg

Если есть вопросы, спрашивайте, отвечу.


  • 4

Кто счастлив, тот и прав. (Л. Н. Толстой)


На правах рекламы

#2 Anddrey

Anddrey

    Стажер

  • Киберсанты
  • PipPipPip
  • 51 сообщений
0
Обычный
  • Страна, Город:
    Ставрополь
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 03:21

Большое спасибо!

<link rel='stylesheet' id='twentytwelve-style-css'  href='<?php echo get_template_directory_uri(); ?>/style.php?ver=3.8.1' type='text/css' media='all' />

А на что менять id='twentytwelve-style-css? А то у меня пока получилось только это: http://mini.s-shot.r...dinka.com/test/


  • 0

#3 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 06:25

Покажите, пожалуйста, содержимое фалов "header.php" и "page.php" Вашей темы.


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#4 Anddrey

Anddrey

    Стажер

  • Киберсанты
  • PipPipPip
  • 51 сообщений
0
Обычный
  • Страна, Город:
    Ставрополь
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 09:17

Header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title><?php if ( is_front_page() ) { ?><?php } ?><?php if ( is_home() ) { ?><?php bloginfo('name'); ?> <?php } ?><?php if ( is_search() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Результаты&nbsp; поиска<?php } ?><?php if ( is_author() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив автора<?php } ?><?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp; &nbsp;<?php bloginfo('name'); ?><?php } ?><?php if ( is_page() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;<?php wp_title(''); ?><?php } ?><?php if ( is_category() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив&nbsp;  &nbsp;<?php single_cat_title(); ?><?php } ?><?php if ( is_month() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив&nbsp; <?php the_time('F'); ?><?php } ?><?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Метки&nbsp; &nbsp;<?php  single_tag_title("", true); } } ?></title>
<link rel="stylesheet" id="wp-product-css" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" id="wp-product-css" href="<?php bloginfo('template_url'); ?>/style.php" type="text/css" media="screen" />

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie8style.css" />
	<![endif]-->
	<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie7style.css" />
	<![endif]-->
	<!--[if lt IE 7]>
<div style="width:600px;background:#757575; margin:50px auto 0px; padding:30px; color:#fff;">
Внимание! Этот сайт не поддерживает Ваш устаревший браузер - Internet Explorer 6. Пожалуйста, следуйте прогрессу и установите нормальный, современный браузер, типа Firefox, Safari, Google Chrome или хотя бы обновите уже свое старье до 8 или 9 версии. Спасибо.
</div>
  <![endif]-->

		
<?php 
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

<script type="text/javascript" src="//vk.com/js/api/openapi.js?74"></script>

<script type="text/javascript">
  VK.init({apiId: 3319263, onlyWidgets: true});
</script>

<meta property="fb:admins" content="{chernogorovandrey}"/>


</head>
<body <?php body_class(); ?>>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=322286101228247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="wrap">
<div class="top_shadow">&nbsp;</div>
<div id="brand">
  <?php if (get_option('prod_logotip') == 'Текст') { ?>
<?php include (TEMPLATEPATH . '/includes/logo-text.php'); ?>
<?php } else { include(TEMPLATEPATH . "/includes/logo-img.php"); } ?>
<?php include (TEMPLATEPATH . '/includes/social.php'); ?>
</div><!--end:brand-->
 <div class="clear"></div>
 <div id="header">
<?php $menuClass = 'nav';
				$primaryNav = '';
				if (function_exists('wp_nav_menu')) {
					$primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'echo' => false ) ); 
				};
				if ($primaryNav == '') { ?>
					<ul class="<?php echo $menuClass; ?>">					
							<li <?php if (is_home()) echo('class="current_page_item"') ?>><a href="<?php bloginfo('url'); ?>">Новости</a></li>							 
					</ul> <!-- end ul.nav -->
				<?php }
				else echo($primaryNav); ?>
 </div>
 <div class="clear"></div>

Page:

 <?php get_header(); ?> 
 <div id="main_col">
 <?php if (have_posts()) : while (have_posts()) : the_post();   ?>
 <div class="post">
  
<h1><?php the_title() ?></h1>
	 
 <?php the_content(); ?> 
<div class="clear"></div>
</div>
 <?php comments_template(); ?>
<?php endwhile; ?>
<?php else : ?>

<h2>Страница не найдена</h2>
<p>Страница, которую Вы искали, не существует, была удалена или переименована.</p>
<?php endif; ?>
</div><!--end:main_col-->

   <?php get_sidebar(); ?>
<?php get_footer(); ?>

Все, я понял, на "wp-product-css" надо поменять)

 

Поменял, но ничего не изменилось: http://seredinka.com/test/


Сообщение отредактировал Anddrey: 25 Январь 2014 - 09:27

  • 0

#5 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 09:42

Попробуйте так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title><?php if ( is_front_page() ) { ?><?php } ?><?php if ( is_home() ) { ?><?php bloginfo('name'); ?> <?php } ?><?php if ( is_search() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Результаты&nbsp; поиска<?php } ?><?php if ( is_author() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив автора<?php } ?><?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp; &nbsp;<?php bloginfo('name'); ?><?php } ?><?php if ( is_page() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;<?php wp_title(''); ?><?php } ?><?php if ( is_category() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив&nbsp;  &nbsp;<?php single_cat_title(); ?><?php } ?><?php if ( is_month() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив&nbsp; <?php the_time('F'); ?><?php } ?><?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Метки&nbsp; &nbsp;<?php  single_tag_title("", true); } } ?></title>
<link rel="stylesheet" id="wp-product-css" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" id="wp-product-css" href="<?php bloginfo('template_url'); ?>/style.php" type="text/css" media="screen" />

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie8style.css" />
	<![endif]-->
	<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie7style.css" />
	<![endif]-->
	<!--[if lt IE 7]>
<div style="width:600px;background:#757575; margin:50px auto 0px; padding:30px; color:#fff;">
Внимание! Этот сайт не поддерживает Ваш устаревший браузер - Internet Explorer 6. Пожалуйста, следуйте прогрессу и установите нормальный, современный браузер, типа Firefox, Safari, Google Chrome или хотя бы обновите уже свое старье до 8 или 9 версии. Спасибо.
</div>
  <![endif]-->
		
<?php 
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

<script type="text/javascript" src="//vk.com/js/api/openapi.js?74"></script>

<script type="text/javascript">
  VK.init({apiId: 3319263, onlyWidgets: true});
</script>

<meta property="fb:admins" content="{chernogorovandrey}"/>

</head>

<body <?php body_class(); ?>>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=322286101228247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="wrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post">   
<?php the_content(); ?> 
<div class="clear"></div>
</div>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php else : ?>
<h2>Страница не найдена</h2>
<p>Страница, которую Вы искали, не существует, была удалена или переименована.</p>
<?php endif; ?>
</div>
</body>
</html>

...это должно быть содержимым Вашего файла "landing.php".


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#6 Anddrey

Anddrey

    Стажер

  • Киберсанты
  • PipPipPip
  • 51 сообщений
0
Обычный
  • Страна, Город:
    Ставрополь
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 14:25

Сделал: http://seredinka.com/test/

 

Ещё чуть что-то подправить бы.


  • 0

#7 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 14:45

Похоже, не хватает блоков с классами стилей. Покажите список файлов шаблона темы - в админке -> Внешний вид -> Редактор -> колонка справа.


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#8 Anddrey

Anddrey

    Стажер

  • Киберсанты
  • PipPipPip
  • 51 сообщений
0
Обычный
  • Страна, Город:
    Ставрополь
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 15:18

  • Шаблон ошибки 404
    (404.php)
  • Архивы
    (archive.php)
  • Комментарии
    (comments.php)
  • «Подвал»
    (footer.php)
  • Шаблон страницы Полная ширина
    (full-width-page.php)
  • Функции темы
    (functions.php)
  • «Шапка»
    (header.php)
  • bloks.php
  • bottom.php
  • box.php
  • feed.php
  • footerblok.php
  • intro.php
  • kama.php
  • logo-img.php
  • logo-text_(RENAME).php
  • meta.php
  • slider.php
  • social.php
  • Основной шаблон
    (index.php)
  • Шаблон страницы Launch Page
    (launch_page.php)
  • Шаблон страницы Главная страница
    (main.php)
  • my_page.php
  • Шаблон страницы
    (page.php)
  • Результаты поиска
    (search.php)
  • Сайдбар
    (sidebar.php)
  • Одиночная запись
    (single.php)
  • style.php
  • timthumb.php

Стили

  • Таблица стилей
    (style.css)
  • pagenavi-css.css 

  • 0

#9 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 15:37

Попробуйте, так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title><?php if ( is_front_page() ) { ?><?php } ?><?php if ( is_home() ) { ?><?php bloginfo('name'); ?> <?php } ?><?php if ( is_search() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Результаты&nbsp; поиска<?php } ?><?php if ( is_author() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив автора<?php } ?><?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp; &nbsp;<?php bloginfo('name'); ?><?php } ?><?php if ( is_page() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;<?php wp_title(''); ?><?php } ?><?php if ( is_category() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив&nbsp;  &nbsp;<?php single_cat_title(); ?><?php } ?><?php if ( is_month() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив&nbsp; <?php the_time('F'); ?><?php } ?><?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Метки&nbsp; &nbsp;<?php  single_tag_title("", true); } } ?></title>
<link rel="stylesheet" id="wp-product-css" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" id="wp-product-css" href="<?php bloginfo('template_url'); ?>/style.php" type="text/css" media="screen" />

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie8style.css" />
	<![endif]-->
	<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie7style.css" />
	<![endif]-->
	<!--[if lt IE 7]>
<div style="width:600px;background:#757575; margin:50px auto 0px; padding:30px; color:#fff;">
Внимание! Этот сайт не поддерживает Ваш устаревший браузер - Internet Explorer 6. Пожалуйста, следуйте прогрессу и установите нормальный, современный браузер, типа Firefox, Safari, Google Chrome или хотя бы обновите уже свое старье до 8 или 9 версии. Спасибо.
</div>
  <![endif]-->
		
<?php 
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

<script type="text/javascript" src="//vk.com/js/api/openapi.js?74"></script>

<script type="text/javascript">
  VK.init({apiId: 3319263, onlyWidgets: true});
</script>

<meta property="fb:admins" content="{chernogorovandrey}"/>

</head>

<body <?php body_class(); ?>>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=322286101228247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="wrap">
<div id="main_col">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post">   
<?php the_content(); ?> 
<div class="clear"></div>
</div>
<?php comments_template(); ?>
<?php endwhile; ?>
</div>
<?php else : ?>
<h2>Страница не найдена</h2>
<p>Страница, которую Вы искали, не существует, была удалена или переименована.</p>
<?php endif; ?>
</div>
</body>
</html>

  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#10 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 15:41

...и покажите содержимое файла "full-width-page.php".


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#11 Anddrey

Anddrey

    Стажер

  • Киберсанты
  • PipPipPip
  • 51 сообщений
0
Обычный
  • Страна, Город:
    Ставрополь
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 15:46

full-width-page.php

<?php
/*
Template Name: Полная ширина
*/
?>
 <?php get_header(); ?> 
 <div id="full_main_col">
 <?php if (have_posts()) : while (have_posts()) : the_post();   ?>
 <div class="post">
  
<h1><?php the_title() ?></h1>
	 
 <?php the_content(); ?> 
<div class="clear"></div>
</div>
 <?php comments_template(); ?>
<?php endwhile; ?>
<?php else : ?>

<h2>Страница не найдена</h2>
<p>Страница, которую Вы искали, не существует, была удалена или переименована.</p>
<?php endif; ?>
</div><!--end:main_col-->

 
<?php get_footer(); ?>

Страницу обновил.

 

Если нужно, напишите почту - скину данные к админке wp и доступа по ftp.


  • 0

#12 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 16:02

Страницу обновил.

 

Чего-то не хватает...

 

Если нужно, напишите почту - скину данные к админке wp и доступа по ftp.

 

Отписал в личку...


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#13 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 18:19

Проблема оказалась, всего лишь, в отсутствии одного очищающего div-тега.

 

Ещё мы забыли прописать название шаблона страницы:

<?php
/*
Template Name: Лендинг
*/
?>

А также, я добавил в шаблон css-правило:

<style type="text/css">
  #wrap { margin: 0 auto; }
</style>

...которое переопределило уже имеющееся и леквидировало отступ сверху и снизу страницы.

 

Плюс, для блока контента был взят немного другой стиль (из файла "full-width-page.php"), а именно:

<div id="full_main_col">

Итого, конечное содержимое файла landing.php получилось таким:

<?php
/*
Template Name: Лендинг
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title><?php if ( is_front_page() ) { ?><?php } ?><?php if ( is_home() ) { ?><?php bloginfo('name'); ?> <?php } ?><?php if ( is_search() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Результаты&nbsp; поиска<?php } ?><?php if ( is_author() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив автора<?php } ?><?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp; &nbsp;<?php bloginfo('name'); ?><?php } ?><?php if ( is_page() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;<?php wp_title(''); ?><?php } ?><?php if ( is_category() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив&nbsp;  &nbsp;<?php single_cat_title(); ?><?php } ?><?php if ( is_month() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Архив&nbsp; <?php the_time('F'); ?><?php } ?><?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?>&nbsp; &nbsp;Метки&nbsp; &nbsp;<?php  single_tag_title("", true); } } ?></title>
<link rel="stylesheet" id="wp-product-css" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" id="wp-product-css" href="<?php bloginfo('template_url'); ?>/style.php" type="text/css" media="screen" />

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie8style.css" />
    <![endif]-->
    <!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie7style.css" />
    <![endif]-->
    <!--[if lt IE 7]>
<div style="width:600px;background:#757575; margin:50px auto 0px; padding:30px; color:#fff;">
Внимание! Этот сайт не поддерживает Ваш устаревший браузер - Internet Explorer 6. Пожалуйста, следуйте прогрессу и установите нормальный, современный браузер, типа Firefox, Safari, Google Chrome или хотя бы обновите уже свое старье до 8 или 9 версии. Спасибо.
</div>
  <![endif]-->
        
<?php
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

<script type="text/javascript" src="//vk.com/js/api/openapi.js?74"></script>

<script type="text/javascript">
  VK.init({apiId: 3319263, onlyWidgets: true});
</script>

<meta property="fb:admins" content="{chernogorovandrey}"/>
<style type="text/css">
#wrap { margin: 0 auto; }
</style>
</head>

<body <?php body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=322286101228247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="wrap">
  <div id="full_main_col">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post">
      <?php the_content(); ?>
      <div class="clear"></div>
    </div>
    <?php comments_template(); ?>
    <?php endwhile; ?>
    <?php else : ?>
    <h2>Страница не найдена</h2>
    <p>Страница, которую Вы искали, не существует, была удалена или переименована.</p>
    <?php endif; ?>
  </div>
  <div class="clear"></div>
</div>
</body>
</html>

...а сам лендинг такой:

 

image_26012014-000454.jpg

 

И даже выскакивает PopUp Domination:

 

image_26012014-000648.jpg


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#14 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 25 Январь 2014 - 19:39

Ещё в процессе создания темы стало понятно, что для разных тем WordPress придётся и по разному создавать шаблоны страниц... Т.е., вроде как, универсального решения нет... Хотя, более менее  знакомый с WordPress пользователь вполне сможет состряпать подобный шаблон самостоятельно.
 
Ещё одно, пожалуй, неправильное действо, которое было проделано в первом посте темы, это то, что основное содержимое тега <head> было взято с уже загруженной в браузере страницы... Почему? Потому что непосредственно в шаблоне темы прописана только функция "wp_head", которая подгружает основное содержимое (в том числе и стили темы) только тогда, когда страница формируется в браузере. Наверное, всё-таки, правильнее будет прописать в нашем шаблоне страницы именно функцию (как это сделано по дефолту) и, при необходимости, немного её отфильтровать. Это, кстати, даст возможность на нашем лендинге функционировать различным плагинам.
 
Сперва кратко перечислю то, что я сделал в первом посте темы для формирования файла "landing.php":

1. Прописал название шаблона страницы:

<?php
/*
Template Name: Лендинг
*/
?>

2. Скопировал из файла темы header.php объявление типа документа (DOCTYPE), начало контейнера HTML, содержимое тега <head>, начало страницы (<body>) и начало нескольких блоков <div> со стилевыми классами... В моём случае это было:

<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
  <div id="main" class="wrapper">

3. Из файла темы page.php я взял функции вывода контента и комментариев на страницу, а также div-блок для стилевого оформления:

<div id="content" role="main">
   <?php while ( have_posts() ) : the_post(); ?>
      <?php get_template_part( 'content', 'page' ); ?>
      <?php comments_template( '', true ); ?>
   <?php endwhile; // end of the loop. ?>
</div>

4. Т.к. нам всё содержимое публикации (заголовок, рубрика, дата, автор, теги и т.д.) не нужно, то данный код:

<?php get_template_part( 'content', 'page' ); ?>

...я заменил на:

<div class="entry-content">
    <?php the_content(); ?>
</div>

...из файла "content-page.php" (напомню, речь идёт о WordPress 3.8.1 и одной из дефолтных тем - "Twenty Twelve"), прихватив, также, div-блок для стилевого оформления.
 
5. Закрыл открытые теги html, body и div.

6. Создав в админке тестовую/пустую/любую страницу и выбрав для неё шаблон "Лендинг", скопировал с загруженной уже на блоге страницы (с исходного кода страницы) содержимое тега <head>... Заменил им содержимое тега <head>, взятое с файла header.php. Удалил из нового содержимого ненужные стили, скрипты и meta-теги.
 
Так и получился "landingpage.php", опубликованный в первом посте темы.
 
 
В принципе, следуя данным шагам, а также шагам из первого поста, думаю, практически любой сможет создать для WP и своей активной темы специальный шаблон страницы для Landing Page. Единственное, пожалуй, не нужно выполнять 6-ой шаг из данного сообщения... Т.е. пусть на лендинг подгружаются все теги, скрипты и стили, это даст возможность работать на лендинге всем установленным на блоге плагинам и оформить лендинг в стилевом оформлении блога... Так мы поступили в примере постом выше.

Функцию "wp_head", которая погружает основное содержимое тега <head>, можно фильтровать, чтобы нужное подгружалось, а ненужное нет... Но это уже другая и не совсем короткая история... Ниже приведу пример отключения только подгрузки основного файла стилей через функцию "wp_head" на нашу страницу...
 
Напомню, что пример реализуется на WordPress 3.8.1 и одной из дефолтных тем "Twenty Twelve"...
 
1. Открываем файл темы "functions.php" и на находим следующий код:

wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

...заменяем его на:

if (is_page(array(ID страниц, на которых нужно отключить основной стиль темы. Через запятую. ))) {
	wp_dequeue_style( 'twentytwelve-style' );
    } else {
	wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
}

ID страниц вы можете узнать в админке блога или на самом блоге:
 
image_25012014-164740.jpg
 
image_25012014-165907.jpg
 
После отключения основного стиля темы наша страничка заметно преобразиться:

image_25012014-012124.jpg -> image_25012014-165555.jpg
 
...но зато теперь стили темы не будут мешать нам создавать свои. Да и форматирование редактора на странице сохраняется.
 
Единственное, возможно, будет иметь смысл выдернуть из отключённого стиля и прописать/подключить к нашему шаблону страницы стили комментариев... Но если вы будете делать полностью уникальный дизайн лендинга, то и оформление комментов тоже потребуется своё.
 
В примере ниже приведён пример лендинга, где отключён основной стиль темы и прописан/подключён свой:
 
image_25012014-203746.jpg

image_25012014-183356.jpg


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#15 Oldboy

Oldboy

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений
0
Обычный

Отправлено 22 Февраль 2014 - 19:17

а где можно взять такой счётчик?

Подскажите пожалуйста, я не шибко силён в программировании... Задача: интернет магазин примерно на 20 позиций + ландинг страника (с А/В тестом).

Фиг знает что меня дёрнуло в сторону вордпресса... Вот теперь разбираюсь... возможно ли всё это создать на wp?

 

а где можно взять такой счётчик?


Сообщение отредактировал Oldboy: 22 Февраль 2014 - 19:34

  • 0

#16 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 22 Февраль 2014 - 21:08

а где можно взять такой счётчик?

 
Если простой таймер, то скриптов достаточно - http://yandex.ru/yan...ратного отсчета


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#17 Oldboy

Oldboy

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений
0
Обычный

Отправлено 24 Февраль 2014 - 15:47

Проверил, в этом шаблоне чего то не хватает... Плагин счётчика и кнопок не отображаются. А на странице без этого шаблона всё работает как часы. 


  • 0

#18 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 24 Февраль 2014 - 22:01

Посмотрю позже, сейчас сильно занят.


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)


#19 Сергей (ex-Gudvin)

Сергей (ex-Gudvin)

    Ученик

  • Киберсанты
  • PipPipPipPipPip
  • 5 785 сообщений
2 710
Очень хороший
  • Пол:Мужчина

Отправлено 02 Март 2014 - 17:37

Проверил, в этом шаблоне чего то не хватает... Плагин счётчика и кнопок не отображаются. А на странице без этого шаблона всё работает как часы.

 
Разобрался в чём проблема... Некоторые скрипты движка, а также плагинов, подгружаются в футере, а он у нас отсутствует... Чтобы на страницу подгружалось всё содержимое футера, то в код нашего шаблона страницы нужно добавить:

<?php get_footer(); ?>

...убрав при этом из нашего шаблона страницы закрывающие теги "body" и "html", т.к. в шаблоне футера, который мы подключили вышеуказанным способом, они присутствуют.

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

<?php wp_footer(); ?>

...и итоговый код нашего шаблона, в таком и в моём случае (а также, пропуская пункт № 6 из этого сообщения), получится такой:

<?php
/*
Template Name: Лендинг
*/
?>
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title>
<?php wp_title( '|', true, 'right' ); ?>
</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
  <div id="main" class="wrapper">
    <div id="content" role="main">
      <?php while ( have_posts() ) : the_post(); ?>
      <div class="entry-content">
        <?php the_content(); ?>
      </div>
      <?php comments_template( '', true ); ?>
      <?php endwhile; // end of the loop. ?>
    </div>
  </div>
</div>
<?php wp_footer(); ?>
</body>
</html>

Если какие-то плагины или вы сами что-то прописываете в файле footer.php, например код счётчика посещаемости, то вам нужно прописать в шаблоне страницы первый вариант кода, и итоговый код нашего шаблона, в таком и в моём случае, получиться такой:

<?php
/*
Template Name: Лендинг
*/
?>
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title>
<?php wp_title( '|', true, 'right' ); ?>
</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
  <div id="main" class="wrapper">
    <div id="content" role="main">
      <?php while ( have_posts() ) : the_post(); ?>
      <div class="entry-content">
        <?php the_content(); ?>
      </div>
      <?php comments_template( '', true ); ?>
      <?php endwhile; // end of the loop. ?>
    </div>
  </div>
</div>
<?php get_footer(); ?>

Теперь всё должно работать. У меня работает.


  • 0

Кто счастлив, тот и прав. (Л. Н. Толстой)






Темы с аналогичным тегами wordpress, landing page, страница приземления, целевая страница, шаблон

Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 скрытых пользователей