[카테고리:] Wordpress

Categories
Wordpress

워드프레스 초보 – 새 글 쓰기

Image41

워드프레스 구조가 글로벌(영어권) 스타일이다보니 한국형 게시판에 익숙한 유저들이 처음 접하는데 거부감이 있을 수 있습니다.

새글 쓰는 방법은 매우 간단합니다.

 

1. 로그인 하기

워드프레스 사이트를 둘러보면 어딘가 “로그인” 이라는 항목이 있습니다. 이미 로그인 되었다면 상단에 상태 바가 한 줄 생겼을 겁니다.

wp_manual (1)

 

처음 구축 시 입력했던 아이디와 암호를 입력하고 로그인 버튼을 누르면 됩니다.

wp_manual (2)

 

2. 글쓰기 메뉴 클릭

로그인이 정상적으로 이루어지면 “데시보드” 라고 하는 사이트 관리 페이지가 나타납니다.

좌측 메뉴들 중 “글” 부분에 마우스를 올리면..

wp_manual (3)

 

아래와 같이 하위 메뉴가 나옵니다.

여기서 “새 글 쓰기”를 클릭하세요.

wp_manual (4)

 

3. 글 작성하기

(1) 제목을 적습니다.

(2) 내용을 적습니다. 이미지를 삽입하려면 “미디어 추가” 버튼을 눌러보세요.

(3) 글을 모두 적었으면 카테고리를 선택하고,

(4) “공개하기” 버튼을 누르면 끝~~~

wp_manual (5)

 

 

데시 보드가 복잡하다면 아래 글을 참고하세요.

워드프레스 초보 2 – 스마트폰에서 새 글 쓰기

Categories
Wordpress

워드프레스 – 카카오톡 플러그인 제작

wpkakao

 

 

워드프레스 콘텐츠 링크를 카카오톡으로 보내는 기능을 구현해 보았습니다.

검색해 보니 테마에 적용하는 방법들이 많은데 만드는 김에 플러그인에 적용해 보았습니다.

각종 파일, 소스코드는 아래 카톡 API 사이트에서 구할 수 있습니다.

http://www.kakao.com/link/ko/api?tab=mobile

 

1. Jquery 링크 걸기

테마에 적용할 때는 아래와 같습니다.

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.2.min.js”></script>

워드프레스에는 기본적으로 Jquery가 설치도어있으므로 아래와 플러그인에서는 아래와 같이 구현합니다.

add_action('init', 'my_plungin_init');
function my_plugin_init(){
  wp_enqueue_script('jquery');
}

2. 카카오톡 스크립트 링크 걸기

카톡API 사이트에서 “kakao.link.js”파일을 다운로드받아 플러그인 폴더에 넣어줍니다.
아래와 같이 링크를 추가해 줍니다.

add_action('init', 'my_plungin_init');
function my_plugin_init(){
  wp_enqueue_script('jquery');
  wp_enqueue_script('kakao', plugins_url( 'kakao.link.js', __FILE__ ));
}

3. 글 내용에 버튼 추가하기

글 내용이 표시될 때 하단에 카톡 링크버튼을 넣습니다.

 

add_filter(‘the_content’, ‘kakaolink’);function kakaolink ($content) {
$strKakaoSend = ‘kakao.link(“talk”).send({ msg : “‘.get_the_title().'”, url : “‘.get_permalink().'”, appid : “syncst”, appver : “1.0”, appname : “Syncst”, type : “link”});’;
$out .=”<div style=’float:right;’ onclick=’javascript:”.$strKakaoSend.”‘><img src='”.plugins_url( ‘kakaotalk.png’, __FILE__ ).”‘></div>”;
return $content.$out;
}

스크린샷 2013-05-08 오후 1.18.28

카톡API 사이트에서 제공하는 이미지는 너무커서 따로 만들었습니다.

 

4. 전송 테스트

스마트폰 브라우저에서 테스트해 보세요~

Image19

 

아래 페이지에서 플러그인을 다운로드 받으실 수 있습니다.

http://blog.icansoft.com/?page_id=113

Categories
Wordpress

워드프레스 테마 제작 2 – 모바일 웹

wordpress

Syncst  테마제작 10일째

당초 계획은 답글 기능 삽입이었는데, 맘에드는 모바일 플러그인이 없어 직접 모바일 테마를 만들어보기로 했다.

화면 크기에 따라 다른 테마를 불러올 수 있을까? 아직 초보인 관계로 그런 기능은 못찾았다.

여러 선구자들의 자료를 조회한 결과 “반응형 웹“이라고들 하는 것이 뭔지 알게되었다.

처음엔 SK 그룹 사이트에서 봤는데 브라우저 사이즈를 조정하면 해당 사이즈에 맞게 사이트 구조가 재구성 되는 것이었다. javascript를 썻을 것이라고 생각했는데, 이제보니 css로 간단히 해결된다는걸 알게되었다.

@media screen and (min-width: 611px) {
.wrap{ width:960px; margin:auto; }
.content{ width:690px; }
  .sidebar{ width:250px; float:right;  }
.footer{ min-width:960px; }
}@media screen and (max-width: 610px) {.wrap{ width:100%; min-width:450px; margin:auto; }
.content{ width:98%; }
  .sidebar{ clear:both; width:98%; margin:auto;  }
.footer{ width:100%; min-width:450px; }
}

css에 위 내용이 포함되면 화면 사이즈에 따라 다른 스타일을 적용할 수 있다.

제작중인 테마의 콘텐츠 영역 폭을 감안해 해당 폭 610픽셀 보다 큰가 작은가를 따져 작으면 사이드바를 콘텐츠 영역 아래로 내려버린다.

@media screen and (min-width: 611px) 에서 min-width와  max-width가 계속 헷갈렸는데 범위를 지정하는 기능인듯 하다. if문 안에 보다 크다 보다 작다를 넣는 식이다.

이런 식으로도 가능하다.

@media screen and (min-width: 611px) and (max-width:800px)

아이패드, 아이폰에서 테스트 결과 아래 코드가 필요하다는 것을 알았다.

<meta name=”viewport” content=”width=device-width, height=device-height”>

일반적으로 scail-init 등으로 확대 비율을 정해주기도 하는데, 1.0으로 설정하면 아이폰에서는 너무 크게 나온다. 그래서 그냥 스케일 부분을 없애고 콘텐츠, 메뉴 클래스에 min-width를 넣어 해결했다.

글에 삽입된 이미지 크기도 이슈가 되었는데, 화면 크기를 줄여도 이미지는 줄어들지 않는 문제가 있었다. 아래 스타일로 해결했다.

img{
max-width:100%;
height: auto;
}

max-width만 넣으면 비율 유지가 안된다.

워드프레스 사이트에서는 contents 폭 변수를 손대라고 하던데 복잡할 것 같아 안해봤다.^^;

다음 계획 – 답글 달기 진짜로..ㅋㅋ

Categories
Wordpress

워드프레스 테마 제작 – 홈 화면 글요약과 썸네일 이미지

wordpress

Syncst 워드프레스 테마 제작 3일째

여러 난관 중 excerpt 를 넘고 있습니다. 괜찮은 테마들은 쉽게 썸네일 이미지 처리하는데 그대로 넣어도 잘 안되네요.

결론! 정석도 좋지만 매커니즘을 이해한다면 그냥 만들어 보는 것도 좋을 듯 합니다 ^^;

<?php if( !is_single() && !is_page() ){ ?> <div class=”excerpt-box”>
<span class=”excerpt-subject”>
  <a href=”<?php the_permalink(); ?>”>
    <?php the_title(); ?>
  </a>
</span> <div class=”excerpt-content”>
  <?php get_first_image(); ?>
  <?php the_excerpt(); ?>  <span class=”excerpt-date”>
    Update : <?php echo get_the_date(); ?>
  </span>
</div>   <div class=”excerpt-line”></div>
</div>

<?php } else{ ?>

<div class=”content-box”>
  <span class=”content-subject”>
    <a href=”<?php the_permalink(); ?>”>
      <?php the_title(); ?>
    </a>
  </span>
  <span class=”content-date”>
    – <?php echo get_the_date(); ?>
  </span>
  <div class=”content-text”>
  <?php the_content(); ?>
</div>
</div>

<?php } ?>

위에서 get_first_image는 function.php에 만들었습니다.

어느 분이 만든 걸 리턴 부분만 에코로 수정했습니다.

function get_first_image() {
global $post;
$first_img = ”;
$output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0]; if( $first_img != “” )
{
echo “<img src=\””.$first_img.”\” width=\”250\” height=\”150\” class=\”excerpt-image\”/>”;
}
}

이미지 사이즈는 개인적으로 와이드가 좋아서 조정 했음.

excerpt 만드는 중 날짜가 첫 글에만 나오고 나머지는 안보이는 문제가 있었습니다.

날짜가 같을 때 생략하면서 나온 문제로 보이는데… 위프3.0이후 부터 get_time? get_the_date 추천한다고 합니다.

대신 echo로 찍어줬어요.

 

다음 계획 – 답글 달기