Skip to content

본 블로그 적용 사용자 정의 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;
    }
  • 좌측 상단의 공개 버튼 클릭

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.