[Tip] 워드프레스 관련 메모

1. 설치형? 가입형?

: 가입형 워드프레스(https://ko.wordpress.com/create/) 는 사용하기 간편하다는 이점이 있으나

무료로 이용할 수 있는 부분이 제한되며 유료 요금 구간을 설정해서 서비스되고 있습니다. 

모든 기능을 이용하고자 한다면 자유도가 높은 설치형

(https://ko.wordpress.org/download/releases/) 이 좋습니다.

2. 워드프레스 사양?

: 우커머스나 PGALL 결제 등의 여러 플러그인에서 서버 환경인 PHP / MYSQL의 사양이 낮아 

정상적으로 동작되지 않은 상황이 발생할 수있습니다. 

PHP/mariadb-10.0x UTF-8로 서버 사양을 업그레이드해서 수정해야 합니다. 

(제가실습용으로 사용한 워드프레스 버전은 4.9.4 버전이었습니다.)

★ 워드프레스를 다운로드 받을 때, wordpress 폴더에 wp-config-sample 파일이 있습니다. 

해당 파일을 wp-config로 바꾸고 디비 네임과 디비 유저, 

디비패스워드를 수정하고 서버에 업로드 해야 합니다. 

★ 관리자 주소는 끝에 /wp-admin 를 붙여줍니다.

3. 고유주소? 

: 작성한 콘텐츠의 글이나 페이지에 접속할 수 있는 하나밖에 없는 주소를 뜻하는 URL입니다. 

고유주소는 글이름 형식으로 설정하는 것이 유리한데,  고유주소를 글 이름 형식으로 설정하면 

제목을 작성하는 순간 워드프레스는 제목의 텍스트를 사용해서 자동으로 고유주소를 생성합니다. 

이렇게 생성된 고유주소는 검색 키워드를 포함하므로 검색 엔진에 노출하는데 유리합니다. 

(설정 메뉴에서 고유 주소 클릭, 글 이름에 선택)

★ 글이나 페이지를 공개한 뒤에는 고유 주소를 변경하지 않는 것이 좋습니다. 

고유주소를 변경한다면 인터넷에 공유되어서 돌아다니는 

기존의 고유주소 링크를 다는 사람들이 클릭했을 때 

페이지를 찾을 수 없다는 오류가 발생하여 해당 오류가 자주 발생 시,

 웹사이트의 신뢰도가 떨어질 수 있습니다. 

검색엔진에서 고유주소 변경 전 URL을 색인했는데 고유 주소를 변경해서 

기존 링크가 깨지면 해당 글이 검색 엔진에 노출되기 어렵습니다.

★ 한글 고유 주소가 연결되지 않을 때는 명시적으로

 유니코드를 사용하도록 .htaccess를 아래와 같이 수정해야합니다.

<IfModule mod_url.c>
    ServerEncoding UTF-8
    ClientEncoding EUC-KR
</IfModule>

★ 카테고리와 태그를 잘 정리하면 검색 최적화에도 도움이 됩니다.

4. 특성 이미지?

: 일반적으로 글 목록에 나타나는 대표 이미지 입니다.

5. 이미지 대체 텍스트?

: 검색 엔진은 크롤링할 때 이미지 속성 중 대체 텍스트를 참조합니다. 

검색 엔진에 노출되어 자신이 올린 이미지와 글이 검색되는데 영향을 미칩니다. 

검색엔진 최적화 측면에서 이미지에 속성정보를 입력하는 것이 좋습니다.

6. 글과 페이지의 차이?

7. 댓글 관리?

: 자신이 운영하는 다른 웹 사이트나 블로그를 통합해서 관리할 수 있는 소셜 댓글 시스템, 라이브리 (https://livere.com/)

8. 전면페이지?

: 워드프레스 이전 버전에서 웹 사이트를 접속했을 때 처음 나타나는 홈페이지를 뜻하는 용어

9. 유용한 플러그인 

1/  contact form7 (https://ko.wordpress.org/plugins/contact-form-7/)

: 고객 문의 게시판을 만들 수 있는 플러그인 입니다. 

항목을 추가할 때 숫자가 나오는데 임의 지정된 문자라 수정해도 무방합니다.

2/ shortcodes ultimates (https://getshortcodes.com/docs/tabs/)

: 짤막한 코드를 사용해 웹사이트에서 원하는 기능을 구현하는 플러그인 입니다. 

[Tip] 세팅된 magnific popup에 추가 작업하기

반응형 페이지에서 쓰기 편한 팝업 플러그인으로

magific popup(https://dimsemenov.com/plugins/magnific-popup/)을 자주 쓰는 편인데,

근래에 해당 팝업이 세팅되어있는 페이지의 추가 작업이 있었습니다.

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
            items: {
                src: 'img/이미지명.jpg'
            },
            type: 'image'

        }, 0);
    });
})(jQuery);

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
          items: {
                src: $('<a  href="#내부링크" class="mfp-img" onClick="closePopup();"><img src="img/이미지명.jpg"></a>'),
	type: 'inline'
			}
        }, 0);
    });
})(jQuery);

function closePopup() {
  $.magnificPopup.close();
}

var data = [
  {
    userWebsite_href: '이동할 페이지.html', 
    userAvatarUrl_img: 'img/팝업 이미지명.png'
  }
];

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
 key: 'my-popup', 
  items: data,
  type: 'inline',
  inline: {
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
              '<a class="mfp-userWebsite">'+
                '<div class="mfp-userAvatarUrl"></div>'+
              '</a>'+'<a href="#">'+
                '<img src="img/버튼 이미지명.png" class="btn">'+
              '</a>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  callbacks: {
    markupParse: function(template, values, item) {
    }
  }
		
        }, 0);
    });
})(jQuery);

jpg나 png 같은 이미지들을 일러스트 파일로 가져올 때, ai 파일로 변환할 수 없는 방법은 없을까 하고 고민한 적이 있었는데요.

완벽하게는 아니지만 실제 이미지를 백터화 시키는 방법이 있다는 사실을 근래에 알게 되었습니다.

(일러스트레이터를 다루고 사용한 지가 언젠데 그걸 이제서야... )

실제 이미지를 백터화 시키는 방법은 간단합니다.

먼저 [file] 에서 [open]을 눌러 원하는 이미지를 불러와줍니다.

(열려있는 파일에 불러오려면 [file]에서 [place]로 이미지를 불러오셔도 됩니다.)

가져온 이미지를 클릭하고 상단에 보면 [Image Tracing]이란 버튼이 있는데 해당 버튼 옆 ▼을 누르시면 다양한 메뉴들이 나옵니다.

내용은 다음과 같습니다.

-High Fidelity Photo : 고화질 사진 이미지로 표현 (★이미지를 고화질 느낌으로 가고 싶으시면 해당 메뉴를 클릭해주세요)

-Low Fidelity Photo : 저화질 사진 이미지로 표현

-3 Colors : 컬러를 3단계로 나눠 표현

-6 Colors : 컬러를 6단계로 나눠 표현

-16 Colors : 컬러를 16단계로 나눠 표현

-Shades of Gray : 이미지를 명암(흑백)으로 구분하여 표현

-Black and White Logo : 흑백 로고 스타일로 표현

-Sketched Art : 스케치 느낌으로 표현 

-Silhouettes : 실루엣 표현

-Line Art : 선으로 단순하게 표현

-Technical Drawing : 선으로 디테일하게 표현

원하시는 느낌으로 골라 클릭해주시면 되고 혹시라도 좀 더 디테일하게 조정하고 싶다 하시면

 [window]에서 [Image Trace]를 선택해주시면 우측에 해당 창이 열리게 됩니다.

Colors에서 More이 아닌 Less 쪽으로 드래그하시면 좀 더 이미지를 디테일하게 조정하실 수 있습니다.

(ex. 위쪽 colors : 20 / 아래쪽 colors : 80 )

원하는 백터화 조정까지 마치셨다면 이미지를 선택한 상태에서

[object]에서 [Expand]로 이동, OK누르시면 백터화가 마무리가 됩니다.

수정을 하실 때에는 오른쪽 마우스를 눌러 ungroup을 하시고 수정하시면 됩니다. 

내가 그린 그림들을 스캔해서 이미지 트레이스하여 다양하게 쓸 수도 있으니까 많이 응용해보세요.

트레이스에 대한 자세한 내용은 아래 어도비 사이트 링크를 참조해주세요.

https://helpx.adobe.com/kr/illustrator/using/image-trace.html