WP > Customize > Layout

Layout

Modification method of designing layouts with the wp.Vicuna private skin。

Change with class

wp.Vicuna private skin has become the mechanism where layout changes with the class which is added to the body element of the theme source.

This has meant the fact that in class for layout which is shown in the one for skin each templet can be modified in layout of the taste.

double class

You try looking at the modification of layout of the index page as an example.。Open the index.php from the php file which forms theme.

And please verify the body element.

<body class="mainIndex double">

In initial condition as description above, double and mainIndex class for layout are divided in the space by class attribute, is set as two values. As for mainIndex class it is not necessary to modify in class in order to identify the template.

  • double

div#utilities in double class becomes a sidebar arranged on side of div#main.

single class

Consequently class of the body element of index.php is modified in single.

<body class="mainIndex single">
  • single

div#utilities in single class becomes 2 lines arranged under the div#main.

multi class

Multiple column module is installed exist in the skin and they are possible to do 3 column indications.

After turning module to ON, it can actualize 3 column layouts by the fact that class of body element of templet source is designated as multi.

<body class="mainIndex multi">
  • multi

In multi class as for div#utilities it is developed on left and right of the di\main, the left becomes main navigation.
(Depending on the skin of other multi column configuration is possible.)

Other page

As example to explained concerning the modification of layout of the index page, but each other pages have become the same scheme.

So separate layout can be set to every page with the class of body element.

For example, the top page to 3 columns, category be 2 columns, individual page to 1 column, it is possible to set the functional layout which is adjusted to the quality of the page inside your site.

Return to page top