메뉴의 ul태그를 nav로 변환

wp_list_pages에 의해 메뉴가 항상 unordered list로 보이는 부분을 nav로 변경하기 위해,
/wp-includes/classes.php에서 아래의 태그를 변경한다.

$output .= $indent . '<li class="' . $css_class . '"><a href="' . get_page_link($page->ID) . '" title="' . esc_attr(apply_filters('the_title', $page->post_title)) . '">' . $link_before . apply_filters('the_title', $page->post_title) . $link_after . '</a>';

function end_el(&$output, $page, $depth) {
	$output .= "</li>\n";
}

위와 같이 li로 세팅된 부분을 수정하면 된다.
(3.0.1버전으로 업데이트 후 라인 넘버 변경)

그 외 태그 변경

제목, 사이드메뉴, 푸터등을 header, aside, footer, section, article (다시 header…)

css3도 살짝 적용 ㅎ

………

변경하고 보니, firefox 플러그인 중 html validator이 에러를 뱉어낸다.
html5의 tag 스펙이 적용되어 있지 않은듯. (W3C의 유효성검사로는 이상없음)

sunflower의 블로그 개편에 필이 받아 그동안 사용한 테마를 바꿔보기로 햇다.
그 와중에 몇몇 버그까지 수정이 될 기대를 했다.

1. 호스팅 계정 변경
사용중이던 cafe24의 64비트 호스팅 (euc-kr)을 다른 계정으로 연결했다.
db와 data를 백업 해 놓고, utf-8계정이 하나 남아 있었는데 이쪽으로 옮기려 했는데…
막상 백업한 sql 파일을 옮기려고 하니 워낙 db가 커서 (30메가 이상) 에러가 뜨더라..
그래서 wordpress에서 제공하는 Tool > Export 기능으로 xml형태로 백업한 후, 새 계정에 설치한 wordpress에서 import로 불렀는데.. 별문제 없이 제대로 동작이 되더라. 멋짐..! (600KB로…)

2. 도메인 변경
새로 설치한 계정으로 대표 도메인을 세팅했는데… 거의 밤 12시에 변경했는데 30분 안되서 변경이 된거 같다.
혹시나 걱정했던 도메인 문제로 세팅이 잘못 되거나 하진 않았음.

3. 테마
먼가 막상 부푼 가슴으로 테마를 만들어 보려고 했는데…
그냥 서핑중에 찾은 design disease의 dilectio theme를 다운받아 설치했다.

4. 버그 수정
이전 버그라면… flikr에서 블로그 내보내기가 안되는 점. 그리고 최근 댓글을 불러올때 마지막 문자열이 깨지는 현상등이 있었는데 모두 계정을 바꾸면서 해결되었다. ^ ^

5. 그 외 플러그인 설치

• flickrRSS
• SyntaxHighlighter Evolved
• WP-SlimStat-Ex
• WPtouch iPhone Theme

이제 css만 맘에들게 약간 수정하면 되겠다.

덧.
SyntaxHighlighter plugin을 설치하면서, 기본테마 외에 바뀐 테마에는 적용이 되지 않았다.
그래서… footer.php를 열어서 <?php wp_footer(); ?>를 </body> 바로 위에 추가해서 해결함.

input type file에 style입히기

javascript

function initFileUploads(classname,position,size,fakewidth) {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	fakeFileUpload.style.width = 100 + "%";
	fakeFileUpload.style.textAlign = position;
	fakeFileUpload.appendChild(document.createElement('input'));
	var image = document.createElement('img');
	image.src='filesearch.gif';
	image.style.verticalAlign = 'middle';
	fakeFileUpload.appendChild(image);
	var x = document.getElementsByTagName('input');
	for (var i=0;i<x.length;i++) {
		if (x[i].type != 'file') continue;
		if (x[i].className != classname) continue;
		if (x[i].parentNode.className != 'fileinputs') continue;
		x[i].className = 'file hidden';
		var clone = fakeFileUpload.cloneNode(true);
		x[i].parentNode.appendChild(clone);
		x[i].setAttribute('size',size);
		x[i].relatedElement = clone.getElementsByTagName('input')[0];
		x[i].relatedElement.className = 'fakeinput';
		x[i].relatedElement.style.width = fakewidth + 'px';
		x[i].onchange = x[i].onmouseout = function () {
			this.relatedElement.value = this.value;
		}
		x[i].parentNode.style.textAlign = position;
	}
}

html

<div class="wrap">
	<form action="" method="post">
		<div class="fileinputs">
			<input type="file" class="file" />
		</div>
		<script type="text/javascript">initFileUploads('file','center',40,310);</script>
		<div class="code">
			&lt;script type="text/javascript"&gt;initFileUploads('file','center',40,310);&lt;/script&gt;
		</div>

		<div class="fileinputs">
			<input type="file" class="file2" />
		</div>
		<script type="text/javascript">initFileUploads('file2','left',60,390);</script>
		<div class="code">
			&lt;script type="text/javascript"&gt;initFileUploads('file2','left',60,390);&lt;/script&gt;
		</div>
	</form>
</div>

• *사이트내에서 파일업로드 필드의 가로값이 두개 이상일경우, 각각 클래스로 사이즈를 제어하도록 함
• *실제 input과 가상 input의 사이즈를 비교하기위해 opacity값을 조절해서 비교하면 쉽습니다.

1. 디자인 입힐 input type=”file”에 특정 클래스 지정 (예제에서는 class=”file”)
2. 해당 input을 div class=”fileinputs” 으로 감쌈
3. 스크립트 호출- initFileUploads(classname,size,fakewidth)
4. classname : 지정한 클래스 이름
5. position: 정렬 (left, center, right 사용)
6. size : 실제 input 사이즈 지정
7. fakewidth : 가상으로 보일 input 박스의 width값

미리보기