Switch page font size to cookie version

The method in the previous article "add font size switch button for WordPress Themes". When a visitor refreshes the page, the settings cannot be saved to the browser cookie. You need to select the font size again, which is not user-friendly, if you have a pair of shoes, you can choose whether to use them once. You do not need to select them again after refreshing them. The following uses the Prower V4 topic as an example to save the font size selected by the viewer to the browser cookie, add to Wordpress topic.

Step 1,Create a new folder named js in the topic directory of Prower V4 and put the downloaded jquery. min. js and styleswitch. js.

Download required JS files: jquery. min and styleswitch

Create a folder named "css" and create three style files named "c1.css1_c2.css1_c3.css.

Open the three style files and enter:

1. In the first input: # post_content {font-size: 14px ;}
2. In the second input: # post_content {font-size: 16px ;}
3. In the third input: # post_content {font-size: 18px ;}

Where: post_content is the DIV selector of the subject body, which can be modified based on different themes.

Procedure2. Open the topic header template and go:

1. <Link rel = "stylesheet" href = "<? Php bloginfo ('stylesheet _ url');?> "Type =" text/css "media =" screen "/>

Add the following:

1. <Link title = css1 rel = "stylesheet" href = "<? Php bloginfo ('template _ url');?> /Css/c1.css "/>
2. <Link title = css2 rel = "stylesheet" href = "<? Php bloginfo ('template _ url');?> /Css/c2.css "/>
3. <Link title = css3 rel = "stylesheet" href = "<? Php bloginfo ('template _ url');?> /Css/c3.css "/>

Add the following to the

1. <Script type = "text/javascript" src = "<? Php bloginfo ('stylesheet _ directory');?> /Js/jquery. min. js "> </script>
2. <Script type = "text/javascript" src = "<? Php bloginfo ('stylesheet _ directory');?> /Js/styleswitch. js "> </script>

Procedure3. Open the single topic template and go:

1. <Div class = "meta"> <? Php the_time ('Y-m-d');?> </Div>

Add the following:

1. <Div span = "fontsize">
2. <A class = "styleswitch" style = "cursor: pointer" title = "small" rel = css1> small </a>
3. <A class = "styleswitch" style = "cursor: pointer" title = "medium" rel = css2> medium </a>
4. <A class = "styleswitch" style = "cursor: pointer" title = "rel" rel = css3> large </a>
5. </Div>

Tossing is complete.

If the browser cookie is not cleared, the selected font size is displayed after refreshing or browsing your site again.

The above method is only used to change the font size. It is a little tricky. You can define different styles so that the viewer can choose the overall layout and style, depending on your imagination and creativity.