The nuances of commercial development on WordPress



    Good day, dear reader. Fate has turned out so that I am one of those who are responsible for the development of Internet agency projects in my favorite city of Khabarovsk. And I would like to tell you 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 assembly of the project. And my goal is to reduce development and further maintenance costs, which translates into the need to make a site as quickly as possible with as many editable elements in the admin panel as possible.

    For the most part, the information will be “technical plan” regarding CMS Worpdress, “top-notch”. I only talk about our path, for whom the use of technology, paths, techniques, etc. a matter of religion - please refrain from holivars. Let's get started.

    To start a small digression. In our general mass, we have precisely, projects are divided into several types according to the development principle:

    • HTML template with themeforest -> assembly on CMS;
    • Design -> layout -> assembly on CMS;
    • Development of individual solutions.


    I’ll make a reservation right away that in this article I will only consider the first two points, because to generalize the third seems to me a rather difficult task, because everyone’s favorite / best / all other bad technologies has their own and in small cities it can be difficult to find a good developer on RoR / Flask and others like them. And I will go over them overviewly. If there is interest in this topic - why not be a detailed article tutorial "How to build a website on WP in 4-8 hours, which the client will be pleased with."

    Why wordpress?



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

    • The convenience of the admin panel for customers. I seriously, after the introduction of this CMS, all customer training came down to the fact that we are sending an administrator password. The memories of recording the video “How to create news”, “How to change the phone on the site” stopped dreaming of me.
    • Site build speed. About 4-8 hours per project is great. Competitive advantage.
    • Curve for training developers to build projects. So far, my record is 1.5 weeks of training from scratch (that is, the HTML abbreviation seems to be a spell that causes Satan) until the site is fully assembled in a period that suits me.
    • Beautiful graphics for customers with a CMS rating :)
    • Freeware, no need to purchase a license.


    And yes, I won’t knock on your door with a brochure in my hands and say, “Would you like to talk about WP?” We just use this CMS and there is a note about this. In fact, here is a monologue in print format that I pronounce to all the new webmasters coming to us.

    What nuances should be considered when designing a project?



    I think that you should think about the nuances of building the site already at this stage. Here are some general and specific recommendations, perhaps obvious ones, coming from the set of plugins and snippets that I use.

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

    When the various menus that will be controlled through the Appearance -> site menu are being typeset, you must adhere to the following structure:



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

    I’ll be obvious as a captain, but all dynamic positions in the layout should be either separate elements (if the phone, then, for example + 7 XXX XXX etc. without perversions), to further replace the placeholder, or be similar to the following logical structure:

    Layout before the list
    Layout of the list item
    ...
    Layout of the list element
    Layout after the list


    It is imperative to create a separate CSS rule for the content that clients paste 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 did I insert a picture and everything went fine!”

    If you have image galleries 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 generates WP shortcode gallery. Or redefine this shortcode and make layout just adhering to the rules “Layout before the list, Layout of the list item, Layout after the list” if the WP functionality regarding the number of columns and other things is redundant.

    The layout of pagination generated by WP takes about the following form:



    The layout of the "breadcrumbs" is trivial. Either ul li list, or , separated by ">>" and others like them.

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

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



    At this point in time, the practice is that we have a repository called kosher_wordpress so that on every project we don’t have to install a bunch of plugins every time again. What is in it and what, in my opinion, is enough at the moment:

    • The latest version of WP.
    • Not a default password on the administrator;).
    • The builder of new types of posts with custom fields from the admin panel. We use Magic fields 2 . Used to create elements of the list Element List -> Separate Element Page. Templates of the form archive- $ type.php and single- $ type.php , or output using WP_Query.
    • The builder of new fields for taxonomy, using Tax-Meta-Class
    • Customizer for editing screens. I use Advanced CustomFields . Indispensable for the next case. There is a contact template, for example tpl-contacts.php , with the Template Name spelled out inside : Contact page template . And it is necessary that when choosing this template in the admin panel, on the contact editing page, additional fields appear, such as the coordinates of the map, the attached feedback form, etc. And here he helps us.
    • Builder of chimes, feedback, order, etc. Contact Form 7
    • The builder of global site settings. It is used for phones in a hat, social networks and other information of this type. Theme Options .
    • Functions.php with functions covering almost all the remaining functionality:
      • Support theme menu. register_nav_menus ();
      • Thumbnail support for posts. add_theme_support ('post-thumbnails');
      • Image resizing, with support from less-> more and caching. resize_image ($ attach_id = null, $ img_url = null, $ width, $ height, $ crop = false)
      • Breadcrumbs generator. the_breadcrumb () .
      • Page navigation generator. wp_corenavi ($ wp_query)
      • Custom walker for wp_nav_menu () to expand. class My_Walker extends Walker Nav Menu { original WP code }
      • Touch for changing the gallery shortcode. remove_shortcode ('gallery', 'gallery_shortcode'); add_shortcode ('gallery', 'my_gallery_shortcode'); function my_gallery_shortcode ($ attr) {}
      • Page navigation generator. wp_corenavi ($ wp_query)
    • File with snippets for reminder.


    And the whole assembly of the project is as follows:

    • Creating a virtual host on a computer
    • git clone ...
    • Import db, enter three SQL commands, in order to tell WP what current URL we have ( gist )
    • Copying snippets from the second monitor and filling the layout with meaning.
    • Deploy to the server and a cup of coffee


    The approximate contents of the file with snippets:
    
    
    
    
    
        
            ID));
            $image = vt_resize(null, $url, 220, 220, true);
            if (!$image['url']) $image['url'] = 'http://placehold.it/220x220&text=NO IMAGE';
            ?>
            
            
        
    
        

    'news', 'posts_per_page' => '3', 'paged' => $paged ); /* Делаем инстанс WP_Query */ $the_query = new WP_Query($args); ?> have_posts()) : ?> have_posts()) : $the_query->the_post(); ?> post->ID)); $image = vt_resize(null, $url, 220, 220, true); if (!$image['url']) $image['url'] = 'http://placehold.it/220x220&text=NO IMAGE'; ?> the_post(); выше втыкаем global $more;$more=0; * Или с настройками WP шаманим по части вывода анонсов. */ ?>


    Over the past year, according to this algorithm, I have collected more than a hundred sites, 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 so far I have nothing to compare with, I will be grateful to the dialogue.

    Only registered users can participate in the survey. Please come in.

    Does it make sense to write a step-by-step detailed tutorial with a bunch of code and examples?

    • 83.3% Yes 718
    • 16.6% No 143

    Also popular now: