웹페이지 제작시, 아래 코드를 삽입하면 모바일기기로 접속할 때 인식하여

자동으로 지정한 페이지로 이동하게 할 수 있다.

<script type="text/javascript"> 
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson'); 
for (var word in mobileKeyWords){ 
    if (navigator.userAgent.match(mobileKeyWords[word]) != null){ 
        location.href = "모바일웹 주소 ex)http://m.naver.com"; 
        break; 
    } 
 }
 </script> 


아주 간단하게 만들어봤다. 이해는 안됨.

일단 결과물


소스코드 입력부분에 광고로 삽입할 광고코드 입력(현재 애드젯광고 사용해봄)



소스퍼가기 해서 소스 퍼간다음,  삽입!


광고입력후 화면


오른쪽 위젯부분에 잘 들어갔다...


사용코드 ::

저번에 위젯만들기1에서 사용한 코드를 기본으로, 위젯 설정창에서 만든 상태라면

이렇게 나온다.




이부분을 작성하려면 아래코드 추가

 
function form($instance){
  //// 내용
}

이 코드를 추가만 해주고 내부에 코드를 작성하면 바로 뜬다. 사용한 실제코드

function form($instance){
	echo"광고 소스 입력 ::";
		$field_id = $this->get_field_id('adSource');
		$field_name = $this->get_field_name('adSource');
?>
      

광고삽입

"; echo "
$instance[adSource]
"; }

코드에서  <!--php 부분은 알아서 수정.

form에서 textarea에 작성된값을 $instance[adSource]에 받아

widget 에서 가져오는 구조인듯 하다....









PSS Widget 

- pssplugin.php (기본) 한개로 구성됨 (글 작성중 현재상태 12/08/10)

왼쪽의 설정부분

function pss_settings_link($links) {
	$links[] = ''.__('설정').'';
	return $links;
}
add_filter('plugin_action_links_'.plugin_basename(__FILE__), 'pss_settings_link', 10, 1);
오른쪽 부분
function pss_setting_link($links, $file) {
	if ($file == plugin_basename(__FILE__)) {
		$links[] = ''.__('설정', 'pss').'';
		$links[] = ''.__('기타', 'sfc').'';
	}
	return $links;
}
add_filter('plugin_row_meta', 'pss_setting_link', 10, 2);


기본 파일 위치 /wordpress/wp-content/plugins/만드려는위젯_이름.php

코드 상단에 아래코드 삽입



기본구조는

class 이름 extends WP_Widget

 function 이름 ( ) {

$widget_options = array ( 'classname' => '이름' , 'description' => '설명' ) ;         $this -> WP_Widget ( '이름' , '위젯이름' , $widget_options ) ; 

 } 

 function widget ( $args , $instance ) {

//실제로 보여지는 부분

}

add_action ( 'widgets_init' , create_function ( '' , 'return register_widget("이름");' ) ) ; ?>





워드프레스 루프문 기본

 

'루프전용' 함수들

현재 포스트의 제목

각 포스트의 고유주소 URL을 표시

각 포스트의 ID

각 포스트의 작성자 이름을 표시

각 포스트가 속해있는 카테고리 표시



워드프레스 한글언어팩에 기본 테마는 이미 곰님의 수정으로 사용하는데 무리가 없지만, 해외에서 제작된 250여개가 넘는 워드프레스 테마를 만끽하기 위해선 테마 파일의 수정이 반드시 필요하다. 코덱스에 워드프레스의 테마를 구성하는 파일들을 간단하게 설명하고 있지만, 내 나름대로, 테터툴의 스킨과 비교하여 조금은 구체적으로 파헤처 볼 생각이다.

기본적으로 워드프레스에서 반드시 필요한 파일은 기본 템플릿 파일인 index.php 이다. 테터툴과 마찬가지로 index.php 파일 하나만으로도 블로그를 구성할 수는 있다. 테마 만드는 사람 마음일 것이다. 다만, 답글까지 한꺼번에 보여준다면, 아니 보여주지 않고 숨겨놓더라도 파일을 읽는데 소요되는 시간은 상당할 것이다. 즉, 파일의 크기나 트래픽량의 증가는 감수할 수 있다면, index.php 파일 하나만으로도 상관없다.

이런 이유에서 워드프레스에서 또 하나의 중요한 파일이 single.php 이다. 파일명처럼 글 하나를 볼때 사용되는 파일이다. single.php 와 함께 다니는 파일은 comment.php 이다. 답글(꼬릿말)이나 트랙백, 핑백의 내용을 보여주며 답글을 작성할 수 있도록 하는 파일이다. 트랙백 주소도 이곳에 표현된다.

Style.css 는 구조화된 워드프레스 테마 템플릿의 시각적인 부분을 담당한다.이미지, 배경색/이미지/아이콘, 폰트 크기/색, 박스 크기/색 등 눈으로 볼 수 있는 대부분을 정의하는 파일이다. 이는 인라인 스타일을 사용하는 대부분의 테터툴 스킨과 다른점이다.Style.css를 수정하기 위해서는 Topstyle pro 3과 같은 프로그램을 이용하는 것이 편리할 것이다.

여기까지만 보면, 테터툴의 index.php 파일을 워드프레스에서는 index.php + single.php + comment.php + style.css 파일로 쪼개 논 것 같다. 맞다. 파일의 효율성을 위해서 독립시킨 것이다. 여기에 다양한 레이아웃을 보여줄 수 있도록 category.php achive.php

예전에 한번 비교해보니 워드프레스 기본테마의 필수 파일 3가지(style.css 제외)를 합친 것이 테터툴 기본스킨의 index.php 파일보다 크기가 훨씬 작았던 것으로 기억난다. 이는 table 레이아웃과 div + CSS 레이아웃의 차이점이랄 수 있다.

아래는 일반적으로 워드프레스의 테마에 포함된 파일 구조이다.

  • inde.php : 기본 템플릿 파일 (대부분 아래의 파일로 분리됨)
    • header.php : 상단에 항상 표현되는 파일
    • footer.php : 하단 항상 표현되는 파일
  • style.css : 기본 스타일 파일 (경우에 따라 아래 파일들로 분리됨)
    • layout.css : 레이아웃을 구성하는 파일
    • default.css : 기본적인 클랙스나 아이디를 구성하는 파일
    • print.css : 블로그 내용을 프린트할 때 사용되는 파일
  • single.php : 글 하나만 볼 때 사용되는 파일
    • comment.php : 답글을 쓸때 사용되는 파일
    • comment-popup.php : 팝업창으로 답글을 쓸때 사용되는 파일
  • sidebar.php : 사이드바(메뉴)를 구성하는 파일
    • sidebar-left.php : 3단 구조에서 왼쪽 사이드바를 구성하는 파일
    • sidebar-right.php : 3단 구조에서 오른쪽 사이드바를 구성하는 파일
  • search.php : 검색결과를 보여주는 파일
  • archive.php : 글 묶음을 볼 때 사용되는 파일
    • category.php : 글의 분류에 따라 글을 볼때 사용
    • date.php : 년, 월, 일별로 글을 볼 때 사용
  • page.php : 블로그 글과 다른 정적인 형식인 페이지를 볼때 사용
    • archives.php : 기본적인 페이지 템플릿
    • author.php : 블로그 주인을 소개할 때 사용하는 페이지 템플릿
    • contact.php : 이메일을 발송할 관련 페이지의 템플릿
    • link.php : 링크 관련 페이지의 템플릿
  • 404.php : 블로그에 없는 파일을 찾을 때 보여주는 파일

'공부 > Wordpress' 카테고리의 다른 글

제작한 플러그인에 설정메뉴 넣기  (0) 2012.08.10
위젯 만들기  (0) 2012.08.10
루프문설명  (0) 2012.08.08
관리자모드에 Custom 플러그인 메뉴 추가하기  (0) 2012.08.06
워드프레스 page에 template  (0) 2012.08.03


워드프레스는 설치형 블로그툴로 요즘에는 블로그를 운영하는 목적뿐만 아니라


회사 홈페이지나 광고 사이트등 많은 사이트들의 CMS(콘텐츠 관리 시스템)로 쓰이고 있습니다.


워드 프레스는 뛰어난 확장성을 갖고 있기 때문에 플러그인이나, 테마등을 개발하여 적용하기 좋습니다.


따라서 많은 수의 테마와 플러그인이 개발되어 공개되고 있으며 좋은 품질의 테마같은 경우에는


유료로 돈을 주고 살 수 있는 경우도 있습니다.


이렇게 다양하게 확장할 수 있는 워드프레스 기능을 활용하여 admin 메뉴에 내 메뉴를 삽입하겠습니다



워드프레스에 관리자 기능이 있습니다. 여기에 워드프레스 관리를 위한 다양한 메뉴가 있습니다.


이 관리자 메뉴에 우리만의 관리자 메뉴를 추가하고 싶을 경우 어떻게 해야 할까요?


우선 플러그인 파일을 워드프레스 설치 디렉토리의 wp-content 디렉토리안으 plugins 폴더에 추가하셔야 합니다.


플러그인이 간단한 단일 php파일이라면 wp-content plugins 폴더에 바로 추가해도 좋지만 여러개의 파일이라면


디렉토리를 만들어서 추가하는 것이 좋습니다. wp-content\plugins에 wdm 이라는 디렉토리를 만들겠습니다.


그리고 wdm 디렉토리 밑에 plugin.php 라는 파일을 만들고 다음 내용을 넣습니다.

(파일 이름은 상관 없습니다.)

<-- 표준 플러그인 형식 -->


<?php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2
*/
?>



<?php

/*

Plugin Name: 플러그인 이름

Plugin URI: 주소

Description: 플러그인 설명

Version: 0.1

Author: 제작자

Author URI: 주소

License: public domain

*/


function screen1() {

include('screen1.php');

}


function screen2() {

include('screen2.php');

}


function wdm_menu() {

// http://codex.wordpress.org/Function_Reference/add_menu_page

add_menu_page('추가메뉴', '추가메뉴', 10, 'menu1', 'screen1', '');


// http://codex.wordpress.org/Function_Reference/add_submenu_page

add_submenu_page('menu1', '서브메뉴', '서브메뉴', 10, 'menu2', 'screen2');

}


// http://codex.wordpress.org/Function_Reference/add_action

// admin_menu를 hook

add_action('admin_menu', 'wdm_menu');

?>




위처럼 작성하면 가장 위의 주석 부분을 워드프레스가 파싱하여 플러그인 목록에 보여줍니다.


plugins에서 plugin이 잘 추가됐는지 확인합니다.


그리고 우리가 추가한 plugin을 사용해야 하므로 active 합니다.


그러면 관리자 메뉴 중 가장 아래에 추가메뉴와 서브메뉴가 추가된 것을 확인할 수 있습니다.


코드를 설명하면 다음과 같습니다. 우선 가장 아래줄의 코드 의미를 봅시다.


add_action('admin_menu', 'wdm_menu'); 



이 코드는 admin_menu 즉 어드민 메뉴가 표현될 때 사용할 hook으로 wdm_menu라는 function을


사용하겠다는 의미입니다. 그러면 wdm_menu를 봅시다.


function wdm_menu() {

// http://codex.wordpress.org/Function_Reference/add_menu_page

add_menu_page('추가메뉴', '추가메뉴', 10, 'menu1', 'screen1', '');


// http://codex.wordpress.org/Function_Reference/add_submenu_page

add_submenu_page('menu1', '서브메뉴', '서브메뉴', 10, 'menu2', 'screen2');

}


add_menu_page를 통해 메뉴를 추가하고

add_submenu_page를 통해 서브메뉴를 추가합니다.


즉 add_action을 통해 admin_menu가 표현될때 wdm_menu라는 function을 사용하여


메뉴를 추가합니다.


메뉴 추가 함수의 자세한 사용법은 해당 함수 호출의 주석 부분의 url을 참고하세요.


또한 add_menu_page와 add_submenu_page를 통해 만든 메뉴를 클릭했을때


호출할 function으로 "screen1"과, "screen2"를 지정합니다. 


이렇게 하면 해당 메뉴를 클릭했을때 각각 screen1()과 screen2() 가 호출됩니다.


각 function을 봅시다.


function screen1() {

include('screen1.php');

}


function screen2() {

include('screen2.php');

}


추가메뉴를 클릭하면 screen1.php 를 포함하여 보여주고


서브메뉴를 클릭하면 screen2.php 를 포함하여 보여줍니다.


각 파일은 아직 올리지 않아서 에러가 나겠지만 필요한 기능을 php 파일에 구현하여 


같은 디렉토리에 올리면 admin의 메뉴에서 구현한 화면을 볼 수 있습니다.



'공부 > Wordpress' 카테고리의 다른 글

제작한 플러그인에 설정메뉴 넣기  (0) 2012.08.10
위젯 만들기  (0) 2012.08.10
루프문설명  (0) 2012.08.08
워드프레스 템플릿 기본구조 ㅡ  (0) 2012.08.06
워드프레스 page에 template  (0) 2012.08.03

[윈도우] Git 사용하기 Develop Tip

바로 이전 블로그에서 git 의 기본 맛보기를 해 보았습니다.
그것은 우분투에서 명령으로 사용해본 git 였다면 이번에는 동일한 것을
윈도우에서 진행해 보겠습니다.

우선 윈도우용 git 프로그램인 msysgit 에서 가장 최신(상단)의 exe를 설치합니다.

그 다음의 설치는 두세 가지 정도만 제외하고 모두 디폴트로 설치했습니다.

설치 안내 창에서 "Next"

라이센스에서 다음,

여기도 디폴드로 하고 다음,

여기도 디폴트로 놓고 다음,

그룹도 디폴트로 놓고 다음,

명령창에서도 git 명령을 사용하기 위하여 세번째 항목을 선택하고, 다음,

자체 OpenSSH 보다는 Putty 를 사용하고 있으므로 두번째를 선택하고, 다음

일단은 윈도우와 리눅스 개발이 분리가 되므로 세번째 항목을 선택하고, 다음

자~ 설치가 끝났습니다.
환경 설정은 알아서 넣어주었기 때문에 명령창을 띄웁니다.

제일 먼저 환경 설정을 위하여 git config --globla 명령을 주었는데 위와 같이 오류 발생했습니다.
(지난번 2월달에 받은 버전에서도 오류가 났었는데요, 뭐... 다음과 같이 하여 해결합니다)

자신의 사용자 디렉터리에 있는 .gitconfig 파일을 우선 삭제하고 나서,
글로벌 설정을 넣으니 이상없이 들어가네요.

일단, W:\VS2010 폴더의 내용을 git 에 넣기위하여 작업을 진행하기전,
해당 폴더 안에서 .gitignore 파일의 내용을 다음과 같이 넣어 줍니다.

*.o
*.obj
*.lo
*.la
*.al
.libs
*.so
*.so.[0-9]*
*.a
*.pyc
*.pyo
*.rej
*~
#*#
.#*
.*
.DS_Store
Debug
Release
*.old
*.bak

위와 같이 넣어 주었습니다.


다음으로 글로벌 ignore 에 위의 파일을 지정해 줍니다.

W:\> git config --global core.excludesfile w:\.gitignore


git init
git add .
git commit -m "init"

를 해 줍니다.

w:\> 에 가서 vs2010 대신 저장소 파일만 가진 vs2010.git 를 다음과 같은 명령어로 만듦니다.

git clone --bare vs2010 vs2010.git

Putty를 이용하여 접속을 하므로, 위와 같이 원격 접속되는 프로파일 (위의 그림에서는 git) 을 만들어 잘 SSH 접속이 되는지 확인합니다.
(가능하면 ssh-keygen 혹은 puttygen 등을 이용한 id_rsa.pub 키를 상대편의 .ssh/authorized_keys 에 넣어주어 암호 없이 접속 하도록 해 줍니다)

이제 기존의 소스는 rename 시킵니다. (나중에 같은 것을 보고 삭제할 것입니다)

W:> ren vs2010 vs2010.old

putty 의 scp인 pscp 명령으로 위와 같이 원격 서버에 디렉터리 통째로 복사해 넣었습니다.

이제 원격 서버에 있던 것을 위와 같이 ssh URL로 cloning 시켜줍니다.
(기존에 있었던 vs2010은 old로 rename 시키거나 삭제 후 해 주시기 바랍니다)

여러 Visual Studio 2010 프로젝트를 빌드한 후, git status 를 확인하였습니다.

git commit -m 'first commit'
을 하고 난 후, 
git push
명령을 주었더니 위와 같이 Git 2.x 버전에서는 

git config --global push.default upstream
을 하라고 하는군요.

git push
명령으로 원격 서버에 로컬 저장소에 commit 한 것을 보내고,

git pull
명령으로 원격 서버에 다른 사용자가 push 시킨 결과를 로컬로 가져옵니다.

이상으로 윈도우에서 Git 를 살펴보았습니다.

Visual Studio용 Extension이 있으나 이상하게 명령행이 더 쉽네요.
(탐색기에 tightly-coupled 되어 있습니다)

어떤 분께는 도움이 되셨기를 바랍니다 ^^




 


How To Create A Custom Page Template In WordPress

by  · 156 COMMENTS

This is a follow-on from my article called: How To Make WordPress Look Like a Website, where we walked through changing which page shows up as the home page for your WordPress website. The idea was to make it look more like a web site rather than a blog.

We changed the front page, but were left with the Page title and Sidebar still. So what if we want to completely customize our home page?

WordPress Page Templates are the answer

WordPress provides a clever way to do this called Custom Page Templates. To create a WordPress Page Template, you’ll need to use your text editor. Go to the directory on your server where you installed WordPress, and then navigate to the directory of your theme. Usually that looks something like this: “/wp-content/themes/default” where “default” is your theme name.

That’s where you will create your custom page template file. Create a file called “cover_page.php” and add the following code to it:

<?php
/*
Template Name: Cover Page
*/
?>

<?php get_header(); ?>
Here's my cover page!
<?php get_footer(); ?>
 

The Template Name: Cover Page tells WordPress that this will be a custom page template, where Cover Page is the name that will show up in the drop down selector when you create your page.

The other lines in this file simply include the header and footer of your blog. You can add any HTML that you want to display on your page in the middle.

That’s it – now you have a custom page template!

Creating a Page Based on Your Custom Page Template

Now all you need to do is create a new Page in WordPress:

Add Page in WordPress Screenshot

and assign your new custom page template to it:
Assign page template in WordPress
Now you will have a completely blank home page, with only the header and footer for your site. You can add ANY code you want to this page and customize it until your heart is content.

One caveat though – you’ll find that any content you put into the “page” you created in the WordPress editor will not show up here. Since you are overriding the page with a custom page template, you’ll need to add your content to the cover_page.php file that you created in order for it to show up.

Once you have the page looking the way you want it, go into Settings -> Reading in your WordPress Admin panel and set the “Front page displays” settings to look like this:

Selecting a static home page in the WordPress Reading Settings

Now your custom page will be the first thing visitors see when they come to your website!

Here’s a video walkthrough: Creating WordPress Page Templates.

Update: watch this video to see how to create a custom page template that is editable from the visual WordPress editor!

See my WordPress Powered Websites series for more WordPress articles, tips and tricks for small business websites.


'공부 > Wordpress' 카테고리의 다른 글

제작한 플러그인에 설정메뉴 넣기  (0) 2012.08.10
위젯 만들기  (0) 2012.08.10
루프문설명  (0) 2012.08.08
워드프레스 템플릿 기본구조 ㅡ  (0) 2012.08.06
관리자모드에 Custom 플러그인 메뉴 추가하기  (0) 2012.08.06


이클립스에서 파일을 작성하게 되면 기본적으로 MS949로 인코딩하게 되어있다.

하지만 나중을 위해서라면 인코딩을 UTF-8로 설정하고 작업하는 편이 좋다.

설정 방법 
Window -> Preferences -> General -> Workspace



위 그림과 같이 Text file encoding 부분을 UTF-8로 바꾸면 된다.



+ Recent posts