Wiki

Language : [ Korean ] [ English ]

1. 다운로드와 예제 페이지

• 플러그인 페이지

2. 왜 수정이 필요한가?

• 한 페이지에 TOC가 여러번 있을 때 해드라인 태그(Hx)나 TOC 레이어의 같은 id들 때문에 표준 xhtml에 어긋납니다. (Version : 0.3)

3. 방법

3.1 개요

1. 싱글 페이지가 아닐 때에는 해드라인 태그에 ID를 넣지 않습니다.
2. TOC DIV의 ID에 새로운 번호를 첨가합니다.
3. CSS 파일을 수정하고 새로운 .js 파일을 만듭니다.

3.2 수정

• 수정할 파일 : tocoholic.php

1. 싱글 페이지가 아닐 때에는 해드라인 태그에 ID를 넣지 않습니다.
   다음을 찾고

   	function TOCoParseContent($match)
   	{
   		if($match[0] == '<!--nextpage-->')
   		{
   			$return = '<!--nextpage-->';
   			$this->pagenum++;
   		}
   		else
   		{
   			$return = '<h'.$match[1].' '.$match[2].' id="tocoholic-'.$this->counter.'">'.$match[3].'</h'.$match[1].'>';
   			$this->counter++; $this->tocoh[] = $match[3]; $this->tocod[] = $match[1]; $this->tocop[] = $this->pagenum;
   		}
   		return $return;	
   	}
   

   다음처럼 고칩니다.

   	function TOCoParseContent($match)
   	{
   		if($match[0] == '<!--nextpage-->')
   		{
   			$return = '<!--nextpage-->';
   			$this->pagenum++;
   		}
   		else
   		{
   			if (is_single() || is_page()) {
   				$return = '<h'.$match[1].' '.$match[2].' id="tocoholic-'.$this->counter.'">'.$match[3].'</h'.$match[1].'>';
   			} else {
   				$return = '<h'.$match[1].' '.$match[2].'>'.$match[3].'</h'.$match[1].'>';
   			}
   			$this->counter++; $this->tocoh[] = $match[3]; $this->tocod[] = $match[1]; $this->tocop[] = $this->pagenum;
   		}
   		return $return;	
   	}
   

2. TOC DIV의 ID에 새로운 번호를 첨가합니다.
   1. class TOCoholic 줄 위에 새로운 라인을 첨가합니다. 다음처럼

      $tocID = 0; // add
      class TOCoholic
      

   2. function TOCoBuildTOC($match) { 부분을 찾고 다음처럼 새로운 라인을 덧붙입니다.

      function TOCoBuildTOC($match)
      {
      	global $tocID; // add
      	$tocID++; // add
      

   3. 다음 줄들을 찾고

      		$return  = '<div id="tocodiv">'."\n";
      		$return .= '<ul class="tocoul_hide" id="tocoul_hide">'."\n";
      		$return .= '<li class="toco_header">TOC ';
      		$return .= '<a href="#" onclick="javascript: document.getElementById(\'tocoul_show\').style.display=\'block\'; document.getElementById(\'tocoul_hide\').style.display=\'none\'; return false;">&laquo;&laquo; show &laquo;&laquo;</a></li></ul>'."\n";
      		$return .= '<ul class="tocoul_show" id="tocoul_show">'."\n";
      		$return .= '<li class="toco_header">TOC <a href="#" onclick="javascript: document.getElementById(\'tocoul_show\').style.display=\'none\'; document.getElementById(\'tocoul_hide\').style.display=\'block\'; return false;">&raquo;&raquo; hide &raquo;&raquo;</a></li>'."\n";
      

      다음처럼 고칩니다.

      		$return  = '<div class="tocodiv">'."\n";
      		$return .= '<h3>Table Of Contents ( <a id="div_tocoul_' . $tocID . 'tog" href="#none" onclick="toggle(\'div_tocoul_' . $tocID . '\');" onkeypress="toggle(\'div_tocoul_' . $tocID . '\');">hide</a> )</h3>'."\n";
      		$return .= '<ul id="div_tocoul_' . $tocID . '">'."\n";
      

   4. 다음을 찾고

      function TOCoCSS()
      {
      	include_once('tocoholic.css');
      }
      

      다음과 같이 고칩니다.

      function TOCoCSS()
      {
      	//include_once('tocoholic.css');
      		$tocoholicLocation = get_settings("siteurl") . "/wp-content/plugins/TOCoholic";
      		echo '	
      	<link rel="stylesheet" href="'.$tocoholicLocation.'/tocoholic.css" type="text/css" media="screen" />
      	<script src="'.$tocoholicLocation.'/tocoholic_script.js" type="text/javascript"></script>
      ';
      }
      

3. CSS 파일을 수정하고 새로운 .js 파일을 만듭니다.
   1. CSS 파일 내용의 예 (tocoholic.css)

      	.tocodiv
      	{
      		min-width: 12em;
      		float: right;
      		margin: 0 0 0 5px;
      		border: 1px solid #ccc; 
      	}
      
      	.tocodiv acronym
      	{
      		cursor: help;
      	}
      
       	.tocodiv h3
      	{
      		font-size: 1em; border-width:0;
      		font-weight: bold;
      		text-align: center;
      		background: #EDEBEB; padding:5px; margin:0;
      	}
      
      	.tocodiv li.tocoli_0
      	{ 
      		padding-left: 0; 
      	}
      
      	.tocodiv li.tocoli_1
      	{ 
      		padding-left: 10px; 
      	}
      
      	.tocodiv li.tocoli_2
      	{ 
      		padding-left: 20px; 
      	}	
      
      	.tocodiv li.tocoli_3
      	{ 
      		padding-left: 30px; 
      	}	
      
      	.tocodiv li.tocoli_4
      	{ 
      		padding-left: 40px; 
      	}	
      
      	.tocodiv li.tocoli_5
      	{ 
      		padding-left: 50px; 
      	}	
      
      	.tocodiv ul li
      	{
      /*바꾸면 안되요. 시작 */
      		list-style-type: none;
      /*바꾸면 안되요. 끝 */
      	}
      	.tocodiv ul { margin:10px; padding:0;}
      

   2. 새로운 자바스크립트 파일(tocoholic_script.js)을 만들고 업로드 합니다. 파일의 위치는 다음과 같아야겠습니다.
      /wp-content/plugins/TOCoholic/tocoholic_script.js
   3. 자바스크립트 파일의 내용

      function toggle(obj) {
          var elstyle = document.getElementById(obj).style;
          var text    = document.getElementById(obj + "tog");
          if (elstyle.display == 'none') {
              elstyle.display = 'block';
              text.innerHTML = "hide";
          } else {
              elstyle.display = 'none';
              text.innerHTML = "show";
          }
      }
      

4. 관련 링크

• Plugin URL