Typecho blog tag Wall and color tag cloud instance

Source: Internet
Author: User
Tags php file rand tag name

Typecho introduction

Typecho is composed of two words: type and echo. It comes from the brainstorming of the development team. Typecho is developed based on PHP5 and supports multiple databases. Is it a kernel robust? Convenient extension? Friendly experience? A lightweight open-source blog program that runs smoothly. Select Typecho to build a unique personal network log publishing platform and enjoy the joy of creation.


Create a tag wall using typecho

I. Example renderings

II. Method

Create a php file named tags. php in the template directory;
Copy the required code (see below) to tags. php;
Create a page in the background and use tags. php as the template.

III. Code implementation

<? Php/*** Tag List * @ package custom */if (! Defined ('_ TYPECHO_ROOT_DIR _') exit;?> <? Php $ this-> need ('header. Php');?> <? Php $ this-> widget ('widget _ Metas_Tag_Cloud ', array ('sort' => 'count', 'ignorezerocount' => true, 'desc' => true, 'limit' => 200)-> to ($ tags);?> <? Php while ($ tags-> next ():?> <A rel = "tag" class = "tag" href = "<? Php $ tags-> permalink ();?> "Target =" _ blank "> <? Php $ tags-> name ();?> <Span class = "article-num-in-tag"> <? Php $ tags-> count ();?> </Span> </a> <? Php endwhile;?> <? Php $ this-> need ('sidebar. Php');?> <? Php $ this-> need ('footer. Php');?>



IV. Description

The gaze at the beginning of the code cannot be omitted. It identifies the file as a custom template file. Without this comment, the newly created template cannot be identified or displayed when you select a template on the background creation page.
Call Widget_Metas_Tag_Cloud to obtain tag data.
$ Tags-> permalink () is a label hyperlink.
$ Tags-> name () is the tag name.
$ Tags-> count () indicates the number of articles contained in the tag.



Implement the color tag cloud effect of Typecho blog

Many bloggers like the color blog tag cloud, and many WP bloggers have already added WordPress blogs, when I visited my blog yesterday, I found that the Typecho blog can also achieve the color tag cloud effect, which is also known as the WP simplified version. It is easy to implement the cloud effect of Typecho color labels. You only need to add the relevant code in the area where the label cloud is displayed. Below is a blog reposted tutorial.

Implementation of the cloud effect of Typecho color labels:

Add the following code where you want to display the tag cloud. Save the file.

<? Php Typecho_Widget: widget ('widget _ Metas_Tag_Cloud ')-> to ($ tags);?> <? Php if ($ tags-> have ():?> <? Php while ($ tags-> next ():?> <A style = "color: rgb (<? Php echo (rand (0,255);?>, <? Php echo (rand (0,255);?>, <? Php echo (rand (0,255);?>) "Href =" <? Php $ tags-> permalink ();?> "> <? Php $ tags-> name ();?> </A> <? Php endwhile;?> <? Php endif;?>



If the tag cloud is added to a single page

<? Php $ this-> content ();?>



Replace with the following code:

<? Php if ($ this-> slug = "tags"):?> <? Php Typecho_Widget: widget ('widget _ Metas_Tag_Cloud ')-> to ($ tags);?> <? Php if ($ tags-> have ():?> <? Php while ($ tags-> next ():?> <A style = "color: rgb (<? Php echo (rand (0,255);?>, <? Php echo (rand (0,255);?>, <? Php echo (rand (0,255);?>) "Href =" <? Php $ tags-> permalink ();?> "> <? Php $ tags-> name ();?> </A> <? Php endwhile;?> <? Php endif;?> <? Php else:?> <? Php $ this-> content ();?> <? Php endif;?>



Create an independent page and click tags to display the effect of the color tag cloud on the independent page.

Independent page implementation principle: judge whether the page is scaled down to tags. If yes, execute the color tag cloud code. If not, the page content is displayed.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.