본 블로그 적용 사용자 정의 PHP & CSS

본 블로그에 적용한 PHP 및 CSS는 다음과 같으며 현재 적용 중이 테마는 Tiny Framework Child Example 테마이다.

※ PHP

• 참고 사이트 [A]: How to Easily Style Tags in WordPress (With Examples)
• 블로그 관리자 메뉴바 > 외모 > 테마 파일 편집기: Tiny Framework Child Example 테마 확인
• 테마 기능 (functions.php) 선택
• 마지막 행에 아래 내용 추가

  /* Tag Collection begins */
  function wpb_tags() { 
  	$wpbtags =  get_tags();
  	$i = 1;
  	$length = count($wpbtags);
  	foreach ($wpbtags as $tag) { 
  		if ($i >= 1 && $i < $length) {
  			$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>  ' . "\n";
  		} else if ($i === $length) {
  			$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n";
  		}
  		$i += 1;
  	} 
  	
  	return $string;
  } 
  add_shortcode('wpbtags' , 'wpb_tags' );
  /* Tag Collection ends */

• 적용 결과 확인: ALL TAGS

※ CSS

• [A] 일부 참고, 적용 결과 확인: ALL TAGS
• 블로그 관리자 메뉴바 > 외모 > 추가 CSS 선택
• 좌측 영역에 아래 내용 입력

  /* 본인 추가*/
  pre {
  	line-height: 1.5;
  	max-width: 100%;
  	margin-top: 10px;
  	overflow: auto;
  	white-space: pre;
  	word-break: break-all;
  	font-size: 0.8125rem;
  	color: #d14;
  	background-color: #f7f7f9;
  	border: 1px solid #e1e1e8;
  	border-radius: 4px;
  	padding: 0.5rem;
  }
  /* [A] 일부 참고하여 적용한 CSS */
  .tagbox { 
  	background-color: #eee;
  	border: 1px solid #ccc;
  	margin: 0px 10px 10px 0px;
  	line-height: 230%;
  	padding: 2px 0 2px 2px;
  }
  .taglink  { 
  	padding: 2px;
  }
  .tagbox a, .tagbox a:visited, .tagbox a:active { 
  	text-decoration: none;
  }
  .tagcount { 
  	background-color: royalblue;
  	color: white;
  	position: relative;
  	padding: 2px;
  }

• 좌측 상단의 공개 버튼 클릭