Geekly Articles each Day
📜 ⬆️ ⬇️

How we make budget sites



Good day, dear reader. Planned as the next article to write in more detail about how typical projects are going to WP. We have quite modest budgets in Khabarovsk, everyone wants to eat, including us, so there are a lot of things that need to be taken into account when developing to maintain the proper level of quality for our clients, earning a piece of bread and butter for themselves. And to provide such a nuance as the training of new employees.

But the m00t user comment struck me a rather sensitive string. Conflict of interests of business and Internet agencies. Many "dead" sites that live exactly before the first extension of the domain name. This situation makes me sad.
')
Therefore, my thoughts on why it is not always necessary to make a site on% framework_name% act as an introductory part. Perhaps the thoughts are obvious, maybe not, but so be it, without them the post will not be completely full. And yes - what is suitable for our Far Eastern market may not be suitable for yours. Let's get started

For those who are interested only in how we collect projects, without thinking about why we need to make a website at all for 10,000 rubles and a philosophical confusion - GOTO 10 .

The prologue.


Some statements are a bit controversial and emotional, even from my point of view, but I strive for dialogue and would be very happy to hear opinions that do not coincide with mine or complement it. Truth is born in controversy.

The trust.

Allegory is quite appropriate here. Suppose I need to replace the bathroom plumbing. If I do not trust the master who does this, constantly criticize, try to give him “valuable instructions”, “go under the arm” - almost always this will not lead to anything good (of course, if you yourself do not have deep knowledge in this matter that, to be honest, not so often occurs). The conflict will only create a negative, which is extremely unnecessary. Yes, there are not very good performers, but the choice of plumbing is not the topic of this note.

So the first thought. In my practice, the most successful projects are those where the client understands what he needs, without instructions on how to do it. Damn it, I suspect that the master knows better how to do plumbing wiring, he has a little more experience with this. And the main task of the studio is to understand the goals of the client as best as possible by choosing the most optimal tool for their achievement. Which brings us to the second thought.

“Sell or help?”

The manager, with due experience, can always “sell” an ajax-calculator to a client on a hairdressing salon website with one employee, who cuts and the director. Can sell design with illustrations, ten thousand each, for the site of tow trucks with one car. Having said the magic words “usability, conversion, production”, impose a three-page on the Zend client, with the possibility of expanding to the spacecraft control panel, and the potential audience is two people per month. There is always a choice, everyone decides for himself which way to go.

Thought is as trivial as 10 kopecks - the client has money, I have money. Retail and all that. There is even a prepared phrase - “you don’t need a project for% too_big_number% thousand rubles, make a model, come back in a year, when you have resources, make a cool website”.

Projects are not made to show the source code to other programmers, but for clients, from whose money, in studios, salary is paid. But balance is important here. This does not mean that it is necessary to write a project in one file, refer “made and forgot”. If done well, the client will return, and there will be a finite number of them in the studio’s view, in any case. And it is necessary to think further about support, because the saved ruble is the earned ruble. And I don’t think that it’s good to spend the programmer’s time on changing the phone or adding news.

The simplest case, for example. There is a person who owns a company that helps motorists stuck in winter. The budget is limited. What do we see and what can we offer? The audience is not demanding, the competition is relatively low in our region, and is it a matter of motion and design, when you are late for work, stuck on the road. Request in the search engine -> phone number -> call. We make the simplest site, serve advertising + seo, that's it. He gets clients, we get him satisfied, who will tell his acquaintances about us, and, most likely, will order a higher level development in the future, having the means. And this site is not done for free.

Regarding how to try to formalize the choice of what will be made. We look at an average of how many percent different conversion of budget and "cool" projects, try to approximately calculate the difference in net profit. Then we consider the period in which the individual development will pay off, if we are suitable for the client, we work. No - a person chooses a template, we begin to build the site. What is the following.

Building a site on WP.


This methodology (loud word, but stylistically it is appropriate) is intended more for “typical” projects, but nothing prevents to draw a good design, take care of writing texts, pick up graphics, make beautiful “motion” (the designer's favorite word when I start to typeset curious things) that will lead the site to another level. It's just an admin panel, it is needed more for the client, rather than for the visitor.

Requirements for educational material that have been formalized and fulfilled:

The retreat is small. Keys contrived, but the essence will make it clear. I try to write as concisely as possible, therefore, if there is a desire to introduce it somewhere else, it is necessary to have an experienced person who can clarify points that seem obvious to me, but it may be that only for me. And I will be grateful if there are additions, because Although this method has proven itself, there is always something better.

Debut.

Received information. It is necessary to make a site that will provide information about the services and products of the company, without a basket / balances and other online store items. This company - our neighbors through the building. A small phone repair service center that sometimes sells spare parts.

By negotiation, a written sheet is born, which in this case is a kind of “Terms of Reference” (which is enough in our practice). Then the following task appears in the task manager:
Type of development: typical.
Position on price: catalog.
Menu structure:
- The main
- About company
- Repair
- Parts catalog
- News
- Contacts
Domain: simple.ru

A set of functional trivial, when there are no additional requirements - this is usually enough to understand what will be on the site.

Let's take the following for granted: the developer has a LAMP server installed, phpmyadmin, git, there is a repository, for example on bitbucket, with pieces from the previous post . All commands are given relative to Ubuntu.

We put LAMP, if suddenly you should not:

sudo apt-get install tasksel sudo tasksel #   LAMP server, Enter etc. sudo a2enmod rewrite sudo apt-get install phpmyadmin sudo apt-get install git

We create VirtualHost, we register in hosts, we include the site:

 mkdir /var/www/simple.ru sudo nano /etc/apache2/sites-available/simple-ru.conf #  - http://pastebin.com/1aWZhurE sudo a2ensite simple-ru.conf sudo service apache2 reload sudo nano /etc/hosts #   127.0.0.1 simple.ru

Go to the project directory, pull files from git, create a database and import a dump that lies in the repository:

 cd /var/www/simple.ru git clone git@bitbucket.org:%username%/kosher_wordpress.git mysql -uroot -p mysql> CREATE DATABASE `simple-ru` CHARACTER SET utf8 COLLATE utf8_general_ci; mysql -u username -p simple-ru < dump.sql

Be sure not to forget to make sql queries so that wp will understand what domain it is on.

Register in wp-config.php connection settings with the database:

 define('DB_NAME', 'simple-ru'); define('DB_USER', 'root'); define('DB_PASSWORD', 'pass'); define('DB_HOST', 'localhost');

Go to the browser at simple.ru and see the expanded Wordpress with our favorite plugins and other necessary things. And now, when I am writing this article, it has become clear that all of the above can be stuffed into one sh script / arranged in gui, because The first 20 times are fun to write in the console - then not. But still.

Mittelspiel.

I will use FORNAX as a template chosen by the client. He very clearly shows the problems that arise, ways to solve them.

The emphasis is, for the most part, on maximum simplicity for a beginner, so this is not a dogma. The balance, if we take the experience of assembling a large number of projects of this type and the training of children, over the past year, is observed. Improvements necessary come with experience, but as the base - approaches. Go.

1. Rename the snippets folder to simple-ru and throw in the layout, the assets folder.



In the themes / simple-ru / style.css file we write the following:

 /* Theme Name:    */

The contents of themes / simple-ru / assets / index.html are copied to themes / simple-ru / index.php and activate the theme in the WP admin panel (Appearance -> Themes -> Activate). If we are currently looking at the site - styles / scripts / images are not connected. Let's solve this problem with the editor / IDE functionality (I use PhpStorm, CTRL + R) Find and replace . Here are three snippet, which are valid in the context of this template, are executed sequentially:

 : href="css/ : href="<?php bloginfo('template_url');?>/assets/css/ : src="js/ : src="<?php bloginfo('template_url');?>/assets/js/ : src="img/ : src="<?php bloginfo('template_url');?>/assets/img/

In my case, it is also necessary to register the paths to the favicons, which I do.

2. Begin to cut the layout of the files

To begin with, based on the structure of the site, we represent how many different types of pages we will have. Namely:


And, of course, the upper part and the lower part of the page will also be rendered into separate templates. Create missing files:


In the admin panel, do not forget to set Settings-> Reading-> On the main display-> Specify the static news page and the main one.

And scatter the layout of the files. Here it is necessary to apply a little ingenuity, but usually there is nothing complicated. In the files themes / simple-ru / header.php and themes / simple-ru / footer.php we copy the top block from the menu, the bottom one with the basement. The remaining pages from themes / simple-ru / assets / *. Html are cut accordingly into your themes / simple-ru / *. Php .

Add get_header () to the top and get_footer () down each template, to connect the header and footer. The "Find and Replace" snippet is executed in the same way, usually only the image part is needed. In the tpl-contacts.php, tpl-products.php files before all the code should be the following:

 <?php /* * Template Name:   */ ?>

For what? Then in the pages we will select them as templates. Details

To make it clearer, here are the listings of the current state, CTRL + C CTRL + V:

themes / simple-ru / header.php
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ShapeBootstrap Clean Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Bootstrap --> <link href="<?php bloginfo('template_url');?>/assets/css/bootstrap.css" rel="stylesheet"> <link href="<?php bloginfo('template_url');?>/assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="<?php bloginfo('template_url');?>/assets/css/style.css" rel="stylesheet"> <!--Font--> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Fav and touch icons --> <link rel="shortcut icon" href="<?php bloginfo('template_url');?>/assets/favicon.ico"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php bloginfo('template_url');?>/assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo('template_url');?>/assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php bloginfo('template_url');?>/assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"> <!-- SCRIPT ============================================================--> <script src="http://code.jquery.com/jquery.js"></script> <script src="<?php bloginfo('template_url');?>/assets/js/bootstrap.min.js"></script> </head> <body> <!--HEADER ROW--> <div id="header-row"> <div class="container"> <div class="row"> <!--LOGO--> <div class="span3"><a class="brand" href="#"><img src="<?php bloginfo('template_url');?>/assets/img/logo.png"/></a></div> <!-- /LOGO --> <!-- MAIN NAVIGATION --> <div class="span9"> <div class="navbar pull-right"> <div class="navbar-inner"> <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> <div class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav"> <li class="active"><a href="index.html">Home</a></li> <li class="dropdown"> <a href="about.html" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="about.html">Company</a></li> <li><a href="about.html">History</a></li> <li><a href="about.html">Team</a></li> </ul> </li> <li><a href="service.html">Services</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </div> </div> <!-- MAIN NAVIGATION --> </div> </div> </div> <!-- /HEADER ROW --> <div class="container"> <!--PAGE TITLE--> <div class="row"> <div class="span12"> <div class="page-header"> <h1> Blog </h1> </div> </div> </div> <!-- /. PAGE TITLE-->


themes / simple-ru / footer.php
 </div> <!-- /.Row View --> <!--Footer ==========================--> <footer> <div class="container"> <div class="row"> <div class="span6">Copyright © 2013 Shapebootstrap | All Rights Reserved <br> <small>Aliquam tincidunt mauris eu risus.</small> </div> <div class="span6"> <div class="social pull-right"> <a href="#"><img src="<?php echo bloginfo('template_url');?>/assets/img/social/googleplus.png" alt=""></a> <a href="#"><img src="<?php echo bloginfo('template_url');?>/assets/img/social/dribbble.png" alt=""></a> <a href="#"><img src="<?php echo bloginfo('template_url');?>/assets/img/social/twitter.png" alt=""></a> <a href="#"><img src="<?php echo bloginfo('template_url');?>/assets/img/social/dribbble.png" alt=""></a> <a href="#"><img src="<?php echo bloginfo('template_url');?>/assets/img/social/rss.png" alt=""></a> </div> </div> </div> </div> </footer> <!--/.Footer--> </body> </html>


themes / simple-ru / front-page.php
 <?php get_header();?> <!--Carousel ==================================================--> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="active item"> <div class="container"> <div class="row"> <div class="span6"> <div class="carousel-caption"> <h1>Example headline</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-large btn-primary" href="#">Sign up today</a> </div> </div> <div class="span6"> <img src="<?php bloginfo('template_url');?>/assets/img/slide/slide1.jpg"></div> </div> </div> </div> <div class="item"> <div class="container"> <div class="row"> <div class="span6"> <div class="carousel-caption"> <h1>Example headline</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-large btn-primary" href="#">Sign up today</a> </div> </div> <div class="span6"> <img src="<?php bloginfo('template_url');?>/assets/img/slide/slide2.jpg"></div> </div> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left " href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"></i></a> <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"></i></a> <!-- /.Carousel nav --> </div> <!-- /Carousel --> <!-- Feature ==============================================--> <div class="row feature-box"> <div class="span12 cnt-title"> <h1>At vero eos et accusamus et iusto odio dignissimos</h1> <span>Contrary to popular belief, Lorem Ipsum is not simply random text.</span> </div> <div class="span4"> <img src="<?php bloginfo('template_url');?>/assets/img/icon3.png"> <h2>Feature A</h2> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <a href="#">Read More →</a> </div> <div class="span4"> <img src="<?php bloginfo('template_url');?>/assets/img/icon2.png"> <h2>Feature B</h2> <p> Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <a href="#">Read More →</a> </div> <div class="span4"> <img src="<?php bloginfo('template_url');?>/assets/img/icon1.png"> <h2>Feature C</h2> <p> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p> <a href="#">Read More →</a> </div> </div> <!-- /.Feature --> <div class="hr-divider"></div> <!-- Row View --> <div class="row"> <div class="span6"><img src="<?php bloginfo('template_url');?>/assets/img/responsive.png"></div> <div class="span6"> <img class="hidden-phone" src="<?php bloginfo('template_url');?>/assets/img/icon4.png" alt=""> <h1>Fully Responsive</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <a href="#">Read More →</a> </div> </div> <?php get_footer();?>


themes / simple-ru / index.php
 <?php get_header(); ?> <div class="row"> <div class="span9"> <!--Blog Post--> <div class="blog-post"> <h2>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour</h2> <div class="postmetadata"> <ul> <li> <i class="icon-user"></i> <a href="#">Author Name</a> </li> <li> <i class="icon-calendar"></i>September 20th, 2013 </li> <li> <i class="icon-comment"></i> <a href="#">100 Comments</a> </li> <li> <i class="icon-tags"></i> <a href="#">Themes</a>, <a href="#">Template</a> </li> </ul> </div> <img src="<?php bloginfo('template_url');?>/assets/img/img1-870x400.jpeg"> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> <a class="btn btn-primary" href="blog-details.html">Read More</a> </div> <!--===============--> <div class="blog-post"> <h2>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour</h2> <div class="postmetadata"> <ul> <li> <i class="icon-user"></i> <a href="#">Author Name</a> </li> <li> <i class="icon-calendar"></i>September 20th, 2013 </li> <li> <i class="icon-comment"></i> <a href="#">100 Comments</a> </li> <li> <i class="icon-tags"></i> <a href="#">Themes</a>, <a href="#">Template</a> </li> </ul> </div> <img src="<?php bloginfo('template_url');?>/assets/img/img1-870x400.jpeg"> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> <a class="btn btn-primary" href="blog-details.html">Read More</a> </div> <!--/.Blog Post--> <!--Pagination--> <div class="pagination"> <ul> <li> <a href="#">Prev</a> </li> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> <li> <a href="#">5</a> </li> <li> <a href="#">Next</a> </li> </ul> </div> <!--/.Pagination--> </div> <div class="span3"> <div class="side-bar"> <h3>Categories</h3> <ul class="nav nav-list"> <li><a href="#">Web Design</a></li> <li><a href="#">Typography</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Business</a></li> </ul> </div> <div class="side-bar"> <h3>Tags</h3> <a href="#">cras</a>, <a href="#">sit</a>, <a href="#">amet</a>, <a href="#">nibh</a>, <a href="#">libero</a>, <a href="#">gravida</a>, <a href="#">nulla</a> </div> <div class="side-bar"> <h3>Recent Post</h3> <ul class="recent-post"> <li><a href=""><strong>The standard chunk of Lorem Ipsum used since </strong></a> <small><i class="icon-user"></i> <a href="#">Author Name</a>, <i class="icon-calendar"></i>Jul 20th, 2013</small> </li> <li><a href=""><strong>The standard chunk of Lorem Ipsum used since </strong></a> <small><i class="icon-user"></i> <a href="#">Author Name</a>, <i class="icon-calendar"></i>Jul 20th, 2013</small> </li> <li><a href=""><strong>The standard chunk of Lorem Ipsum used since </strong></a> <small><i class="icon-user"></i> <a href="#">Author Name</a>, <i class="icon-calendar"></i>Jul 20th, 2013</small> </li> </ul> </div> </div> <!--==================--> </div> <?php get_footer(); ?>


themes / simple-ru / page.php
 <?php get_header();?> <div class="row"> <div class="span12"> <h2>Welcome to Fornax</h2> <img class="pull-left" alt="" src="<?php bloginfo('template_url');?>/assets/img/img2.png" /> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> </div> <div class="hr-divider"></div> <?php get_footer();?>


themes / simple-ru / tpl-contacts.php
 <?php get_header(); ?> <!--GOOGLE MAP--> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div class="row"> <div class="span12"> <div id="map-canvas"></div> </div> <span class="span6"> <form> <fieldset> <h3>Get in Touch</h3> <input class="input-xxlarge" type="text" placeholder="Name" /> <input class="input-xxlarge" type="text" type="email" placeholder="Email" required/> <textarea class="input-xxlarge" rows="10" placeholder="Your Message"></textarea> <br> <button type="submit" class="btn">Submit</button> </fieldset> </form> </span> <span class="span6"> <h3>Address</h3> <address> <strong>Fornax, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </p> </span> </div> <?php get_footer(); ?>


themes / simple-ru / tpl-products.php
 <?php /* * Template Name:    */ ?> <?php get_header(); ?> <div class="span12"> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <img alt="" src="<?php bloginfo('template_url');?>/assets/img/team1.jpg"> <div class="caption"> <strong>DERRICK JEFFERSON</strong> / UI DESIGNER <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> </p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img alt="300x200" src="<?php bloginfo('template_url');?>/assets/img/team2.jpg"> <div class="caption"> <strong>ENJAMIN GARRETT</strong> / MARKETING <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> </p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img alt="300x200" src="<?php bloginfo('template_url');?>/assets/img/team3.jpg"> <div class="caption"> <strong>DASIA KATELYN</strong> / IOS DEVELOPER <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> </p> </div> </div> </li> </ul> </div> <?php get_footer(); ?>


3. Fill the meaning of "strapping"

Now all the work comes down to replacing the layout with WP functions. The work is dreary, but what to do, we are professionals.

Let's start with the binding ( header, footer ). The following is necessary:

  1. Font Source Sans Pro has no Russian characters, correct.
  2. Titles, seo tags, contextual admin bar above. Let's write wp_head () and wp_footer ().
  3. The menu should be controlled from the admin panel.
  4. Leave the page title only internal.
  5. Editable logo
  6. Social networks below
  7. Copyright

In the template header.php we prescribe titles and replace the font (we select an analogue, I took Open Sans as an example).

 <title>ShapeBootstrap Clean Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> 

 <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php wp_head();?> 

 <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'> 

 <link href='http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,600&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <!--   assets/css/style.css   Soure Sans Pro  Open Sans, CTRL+R -->

And before body in the file footer.php we insert <?php wp_footer();?> .

Point three is a little more interesting. WP uses the wp_nav_menu ($ args) function for output. Our goal is to make the HTML generated by this function similar to the template.

As we can see, based on the layout, the class of child menus is the dropdown menu . And for the parent, not everything is good:

 class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b>

What you need to get?
 ... <div class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav"> <li class="active"><a href="index.html">Home</a></li> <li class="dropdown"> <a href="about.html" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="about.html">Company</a></li> <li><a href="about.html">History</a></li> <li><a href="about.html">Team</a></li> </ul> </li> <li><a href="service.html">Services</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> ...


But that's okay, it is enough to inherit the standard class Walker_Nav_Menu, modify it a bit, put it in functions.php and assign it to our function that displays the menu. Well, plus, the active menu item is highlighted.

As an example
 <?php /* functions.php */ class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu { /** * Display Element */ function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) { $id_field = $this->db_fields['id']; if ( isset( $args[0] ) && is_object( $args[0] ) ) { $args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); } return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output ); } /** * Start Element */ function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { if ( is_object($args) && !empty($args->has_children) ) { $link_after = $args->link_after; $args->link_after = ' <b class="caret"></b>'; } parent::start_el($output, $item, $depth, $args, $id); if ( is_object($args) && !empty($args->has_children) ) $args->link_after = $link_after; } /** * Start Level */ function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("t", $depth); $output .= "\n$indent<ul class=\"dropdown-menu list-unstyled\">\n"; } } add_filter('nav_menu_link_attributes', function($atts, $item, $args) { if ( $args->has_children ) { $atts['data-toggle'] = 'dropdown'; $atts['class'] = 'dropdown-toggle'; } return $atts; }, 10, 3); add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); function special_nav_class($classes, $item){ if( in_array('current-menu-item', $classes) ){ $classes[] = 'active '; } return $classes; } ?> <?php /* header.php */ $args = array( 'container' => 'div', 'menu_class' => 'nav', 'container_class' => 'nav-collapse collapse navbar-responsive-collapse', 'walker' => new Bootstrap_Walker_Nav_Menu ); wp_nav_menu( $args ); ?>


As a result, we got a menu that matches the template:



Walker to write it already goes beyond the direction that I took when I wrote this note, but you can usually resolve this issue alternatively, after spending some time modifying the layout.

In order to remove the heading from the main one and show only on internal ones, there are functions of conditions. We need is_home () . Just wrap the block in the condition, at the same time display the title in it:

 <?php /* header.php */ ?> <?php if(!is_home()):?> <!--PAGE TITLE--> <div class="row"> <div class="span12"> <div class="page-header"> <h1> <?php wp_title('');?> </h1> </div> </div> </div> <!-- /. PAGE TITLE--> <?php endif;?>

Go ahead. All other points of our binding fall under the concept of "global site settings." For this, I use this tool (thanks to the author).

Array example:
 <?php ... $options = array( /* * ,  */ array( 'id' => 'standard', 'type' => 'opentab', 'name' => __(', ', 'slickadmin'), ), array( 'name' => __('', 'slickadmin'), 'id' => 'logo', 'type' => 'upload', ), array( 'name' => __(',  #1', 'slickadmin'), 'id' => 'copy1', 'type' => 'text', ), array( 'name' => __(',  #2', 'slickadmin'), 'id' => 'copy2', 'type' => 'text', ), array( 'type' => 'closetab', ) ); ... ?>


The result is a rather nice form of settings for the theme:



We replace placeholders in the layout with <?php echo sa_option($id);?> , Add fields for social networks and is ready.

3. Go to the internal pages.

To begin with, we will create all the pages we need in the admin panel and assign custom templates for the Contacts page and the Products page. And add to the menu at the same time.



Now we can navigate through the menu, our beautiful pages will be visible. But the content manager, who will fill this whole thing, will unscrew me if I leave it like this. We continue to work.

Template static pages, page.php

We use main loop , everything is standard. Listing the final template:

 <?php get_header();?> <div class="row"> <div class="span12"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; ?> <?php else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> </div> </div> <div class="hr-divider"></div> <?php get_footer();?>

Catalog template, tpl-products.php

Let's create, using the Magic Fields plugin, a new type of posts. There are no additional fields for this type; select the default title, thumbnail and excerpt with a checkmark. With WP_Query, we replace the placeholders in the tpl-products.php template with a loop from the database.

If there are fields, just get them with get ();

Listing the final template:

 <?php /* * Template Name:    */ ?> <?php get_header(); ?> <div class="span12"> <?php $args = array( 'post_type' => 'products', 'posts_per_page' => '-1' ); $the_query = new WP_Query($args); ?> <?php if ($the_query->have_posts()) : ?> <ul class="thumbnails"> <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> <?php $url = wp_get_attachment_url(get_post_thumbnail_id($the_query->post->ID)); $image = vt_resize(null, $url, 600, 300, true); if (!$image['url']) $image['url'] = 'http://placehold.it/600x300&text=NO IMAGE'; ?> <li class="span4"> <div class="thumbnail"> <img alt="<?php echo the_title(); ?>" src="<?php echo $image['url']; ?>"> <div class="caption"> <strong><?php echo the_title(); ?></strong> <p><?php the_excerpt();?></p> </div> </div> </li> <?php endwhile; ?> <?php wp_reset_postdata(); ?> </ul> <?php else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> </div> <?php get_footer(); ?>

News template, index.php

We will not crush into sidebars with widgets, because there is usually no need for this. Therefore, we do the same. Main loop and placeholders. Well, a few functions you need to know to display tags, padzhinatsii, a list of categories. The code will more concisely explain:

 <?php get_header(); ?> <div class="row"> <div class="span9"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); $image = vt_resize(null, $url, 870, 400, true); if (!$image['url']) $image['url'] = 'http://placehold.it/870x400&text=NO IMAGE'; ?> <div class="blog-post"> <h2><?php the_title();?></h2> <div class="postmetadata"> <ul> <li> <i class="icon-calendar"></i><?php the_date();?> </li> <li> <i class="icon-tags"></i> <?php echo get_the_tag_list();?> </li> </ul> </div> <img src="<?php echo $image['url'];?>"> <p><?php the_content('');?></p> <?php if(!is_singular()):?> <a class="btn btn-primary" href="<?php the_permalink();?>"> </a> <?php else:?> <a class="btn btn-primary" href="/novosti"> </a> <?php endif;?> </div> <?php endwhile; ?> <div class="pagination"> <?php global $wp_query; wp_corenavi($wp_query);?> </div> <?php else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> </div> <div class="span3"> <div class="side-bar"> <h3></h3> <?php echo get_the_category_list(); ?> </div> <div class="side-bar"> <h3></h3> <?php echo get_the_tag_list();?> </div> </div> </div> <?php get_footer(); ?>


Template home, contact page template (front-page.php, tpl-contacts.php).

There are many ways, the easiest is to throw WP_Query on the slider, creating a custom type in the admin panel, the rest of the elements through the global settings of the site. The only nuance on the contact page. Which site without a feedback form? I use the Contact Form 7 plugin, layout integration is pretty simple. , .

--.

  2. /> [text* name class:input-xxlarge akismet:author placeholder ""]

, . , etc. :

  <?php echo do_shortcode('[contact-form-7 id="4" title="  "]');?>


.

, , -. — 20 . seo/.

6 .

Note. , , , . , , , . . , , , , , , , - , .

Result.

Source: https://habr.com/ru/post/252531/

More articles:


All Articles