Geekly Articles each Day
📜 ⬆️ ⬇️

The nuances of commercial development on WordPress



Good day, dear reader. The fate was such that I am one of those responsible for the development of projects of an Internet agency in my beloved Khabarovsk city. And I would like to talk about how we maintain the proper quality of the product for customers, subject to fairly low budgets in comparison with the central part of Russia, which affects the requirements for the speed of project assembly. And my goal is to reduce development costs and further maintenance, which translates into the need to make a website as quickly as possible with as many editable elements as possible in the admin panel.

For the most part, the information will be “technical plan”, regarding CMS Worpdress, “at the top”. I only talk about our way, for whom the use of technology, ways, techniques, etc. question of religion - please refrain from holivar. Let's get started
')
For a start, a small digression. In general, we have, projects are divided into several types according to the principle of development:



At once I will make a reservation that I will consider only the first two points in this article, because it seems to me to be quite difficult to summarize the third one, since Favorite / best / all other bad technologies are different for everyone and in small cities it can be difficult to find a developer of a good level on RoR / Flask and their ilk. And run over them visually. If there is an interest in this topic - why not be a detailed article-tutorial "How to build a site on WP in 4-8 hours, which the client will be satisfied."

Why wordpress?



Low budgets and a desire to bring less entropy into the world proved the choice. In details:



And yes, I will not knock on your door with a brochure in hand and say “Would you like to talk about WP?”. We just use this CMS and this is the note. In fact, there is a monologue in print format that I give to all the new webmasters who come to us.

What nuances should be taken into account when imposing a project?



I think that thinking about the nuances of assembling the site should be already at this stage. Here are some general and specific recommendations, perhaps obvious, coming from a set of plug-ins and snippets that I use.

The template should be easily divided into the “header of the site”, the actual content and “basement”. If you need to hide some elements of the header / footer - WP provides quite a few great condition functions. ( is front page (), is_404 () etc.). If you need to change the appearance - CSS can, body_class () is available.

When building up various menus that will be controlled via the Appearance -> site menu, you need to adhere to the following structure:

<ul> <li> <a href=""> </a> </li> <li> <a href=""> </a> <ul class="sub-menu"> <li> <a href=""> </a> </li> <li> <a href=""> </a> </li> </ul> </li> <li> <a href=""> </a> </li> </ul>


From the nuances it is important that the submenu should have a css class sub-menu . This will save you from having to write a custom walker when building a site, for the wp_nav_menu ($ args) function ;.

I would be like a captain, but all dynamic positions in the layout should be either separate elements (if a telephone, then, for example, + 7 XXX XXX etc. without distortions), to further replace the placeholder, or be similar to the following logical structure:

Layout to the list
Imposition of a list item
...
Imposition of a list item
Layout after list


It is necessary to create a separate rule in CSS for the content that customers insert through wysiwyg in the admin panel. Something like this (let it be LESS):

 .user-content{ ... a{ &:hover{ ... }; &:active{ ... }; &:focus{ ... }; } p{ ... } table{ thead { ... th { ... } } tbody { tr{ ... td{ ... } } } } h1, h2, h3, h4, h5, h6, h7{ … } h1{ ... } ... h7{ ... } ul{ ... li{ ... } } img{ … } }


In the future, it will save you from calls like “Why I inserted a picture and everything went with me!”

If you have an image gallery on the site (three in a row, six in a row, etc.), then you need to bring the layout of these galleries into the layout generated by the WP shortcode gallery. Or redefine this shortcode and make a layout simply by following the rule “Layout before the list, Layout of the list item, Layout after the list” if the WP functionality on the part of the number of columns and other things is redundant.

Layout of page navigation generated by WP takes the following form:

 <div class="pagination"> <a class="prev page-numbers" href="#"> </a> <a class="page-numbers" href="#">1</a> <span class="page-numbers current">2</span> <a class="page-numbers" href="#">3</a> <a class="next page-numbers" href="#"> </a> </div>


Layout "breadcrumbs" is trivial. Either ul li list, or <a/>, separated by ">>" and their ilk.

I also want to say that the whole block of the above fits into one phrase - type it up, styling the markup that WP / plugins / snippets functions generate and there will be happiness.

Got a set of html / css / js files, what next?



At this point in time, the practice is such that we have a repository, which we call kosher_wordpress, in order not to install a bunch of plug-ins on each project again. What is in it and what, in my opinion, at the moment is enough:



And the entire assembly of the project is as follows:



The approximate content of the file with snippets:
 <?php /* * Template Name:   */ ?> <?php /* *       . */ ?> <?php /* *   header.php */ get_header(); ?> <?php /* *    */ ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php /* *         ,     $image['url'] */ $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); $image = vt_resize(null, $url, 220, 220, true); if (!$image['url']) $image['url'] = 'http://placehold.it/220x220&text=NO IMAGE'; ?> <?php the_title(); ?> <?php the_content(); ?> <?php endwhile; ?> <?php else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> <?php /* *   WP_Query   */ ?> <?php /*       */ $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'post_type' => 'news', 'posts_per_page' => '3', 'paged' => $paged ); /*   WP_Query */ $the_query = new WP_Query($args); ?> <?php if ($the_query->have_posts()) : ?> <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> <?php /* *         ,     $image['url'] */ $url = wp_get_attachment_url(get_post_thumbnail_id($the_query->post->ID)); $image = vt_resize(null, $url, 220, 220, true); if (!$image['url']) $image['url'] = 'http://placehold.it/220x220&text=NO IMAGE'; ?> <?php echo $image['url']; ?> <?php /* *    ,    (    more). *   ,   $the_query->the_post();   global $more;$more=0; *    WP     . */ ?> <?php the_title(); ?> <?php the_content(' ...'); ?> <?php endwhile; ?> <?php /* *   */ wp_corenavi($the_query); ?> <?php /* *   */ wp_reset_postdata(); ?> <?php else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> <?php /* *   footer.php */ get_footer(); ?>

According to this algorithm, over the past year more than a hundred sites have been collected, on average, it takes from 1 to 3 working days, depending on the complexity of the design and various motion effects. The assembly itself takes about 4-8 hours. Perhaps this is not the result, but for now I have nothing to compare with, I will be grateful to the dialogue.

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

More articles:


All Articles