[WP개발] 크롬에서 접속한 워드프레스 사이트가 갑자기 스타일 및 파일이 깨져보일때

내 맥 크롬에서 플젝연관된 특정 사이트가 갑자기 스타일이 깨진채로 보여서(이미지 포함) 확인해보았더니 이미지 경로나 다른 파일 참조 경로가 https로 자동으로 바뀌어있더라. 보안서버 설치도 안되어있는데.
그런데 재밌는건 사파리에선 잘된다는거...
다른사람 컴도 잘되고 모바일에서도 잘 나오고
공유기문젠가 하여 다른 와이파이로 접속해도 증상은 여전하고
바이러스 애드웨어 하나도 안잡히고
크롬 지웠다 깔아도 똑같고
시스템 clean같은거 해도 여전하고
그래서 chrome forum을 가서 봤더니


Site broken in Chrome (SSL issue) 
https://wordpress.org/support/topic/site-broken-in-chrome-ssl-issue/page/2

크롬업뎃이 되면서 wordpress에서 woocommerce계열은 다 https로 연결시켜버림.
여기는 우커머스를 설치하긴 했지만 결제모듈이 나중에 들어갈거라서 보안서버는 설치가 안되어있었던거고.

그래서 해당테마의 functions.php를 열어 아래와 같은 코드를 추가해주면 된다.
(강제로 https 비활성화)

$_SERVER['HTTPS'] = false;

이것때메 왜인가 하고 다 삭제하고 검사하고 쌩난리를 쳣네 ㅋㅋ 몇시간을 소비한것인가,,,

[WP 팁/플러그인] Contact form 7 을 사용하여 메일 송수신이 잘 되지않을때

워드프레스의 Contact From 7을 사용중에
간혹 메일이 전송/수신이 되지 않는경우가 있다.

지금까지 찾아본 정리 팁은 다음과 같다.

1. Gmail  계정으로 연결한다.
구글 앱스 또는 쥐메일 계정으로 등록시켜 놓으면 좀 더 안정적인 메일전송을 기대해볼 수 있다.

다만 나의 경험상 메일 주소를 그대로 등록해놓았을때 배달이 안될 때가 있었는데
그때에는 환경설정에 들어가 미러링 처럼 정의된 또 다른 메일주소를 입력하니 정상적으로 동작하기도 하였었다.

그밖에 쥐메일/보안 관련 메일 전송시 Configure SMTP 플러그인을 사용하는 방법도 추천.

2. Gravity Forms, Ninja Forms 등의 플러그인도 유명하다고 한다.
나는 직접 설치해서 써보지 않아 자세한 설명은 생략.
- Ninja Forms : 바로가기 / 그나저나 내가 좋아하는 레드컬러에 반쯤 삐져나온 닌자 캐릭 귀엽...;
- Gravity Forms : 바로가기
- 두 플러그인에 대한 비교 페이지


3. 자신의 서버 호스팅의 환경/세팅과 연관되어있을수도 있으니 체크.

4. 그밖에 Contact From DB 플러그인 이용하여 사용자의 전송정보를 DB로 함께 보관할수도 있다.

[WP 설치] 아마존 AWS 서버 EC2에 워드프레스 설치 및 세팅

아마존 EC2 서버에 워드프레스를 설치했던 과정을 기록한다.

1. FTP 환경설정

먼저 아마존 서버로 워드프레스 파일을 업로드 해서 설치 해야하기 때문에 우선 FTP 세팅을 해주어야 한다.
EC2는 ssh로 접속을 하는데 비번접속이 아닌 암호화된 pem파일을 이용해서 접속이 가능하다. (인스턴스 생성 완료 시 다운받은 파일)

또한 EC2는 root유저가 없으며 기본적으로 ec2-user를 사용하게끔 되어있다.
- PuTTYgen프로그램을 실행하여 pem파일을 프라이빗 키 ppk 파일로 변환한다.
- 파일질라 등의 FTP프로그램을 연다. setting > ppk 파일을 직접 지정한다.
- 다 되었다면 접속한다. 접속 시, SFTP 에서 호스트 명 (아이피주소) / 사용자 ec2-user 지정하여 접속한다.

*이것에 관한 자세한 설명은 아래 참고한 링크를 통해 확인한다.
- http://regularmotion.kr/aws%EC%97%90-apm%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0-3-ppk-%ED%8C%8C%EC%9D%BC-%EC%83%9D%EC%84%B1-putty-%EC%A0%91%EC%86%8D/
- http://trend21c.tistory.com/1298

2. 워드프레스 설치
일반적인 워드프레스 설치방법대로 설치한다.

3. jQuery 에러사항
워드프레스 사용중 아래와 같은 에러를 발견하였다.

jQuery is not defined and Uncaught ReferenceError: jQuery is not defined

해결방법은 아래와 같다.
참고 링크 : http://www.kevinleary.net/wordpress-admin-jquery-is-not-defined/

SSH or FTP into your site and open up your wp-config.php file. Turn off script concatenating by adding this line:

define('CONCATENATE_SCRIPTS', false); 

Make sure you add this before:

/** Absolute path to the WordPress directory. */ if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/');

나의 경우 Step 1만 하고, 나머지는 ssh체크 후, ppk넣고 진행하였다. 호스트는 EC2서버의  아이피 주소를 넣었다.

4. SFTP접속 가능하게 해주는 워드프레스 플러그인
아마존으로 설치한 워드프레스에서 플러그인 설치 및 업데이트, 워드프레스 자동/업데이트 등을 관리자 화면에서 진행시 필요한 것들이다.

* SSH SFTP Updater Support plugin 설치
- http://wordpress-tips4all.blogspot.kr/2012/12/wordpress-asking-ftp-or-ftpsssl-ec2.html
- https://wordpress.org/plugins/ssh-sftp-updater-support/


5. 기타 에피소드
워드프레스를 설치하고 다른곳에 있던 워드프레스 데이터를 가져올때
Import Wordpress에서 wp-content/uploads를 못가져온다는 에러가 났었다.

이때 wp-content 아래 uploads 폴더를 직접 생성하고 권한 777했더니 정상작동하였다.
(upload폴더 자체가 생성이 되어있지 않았었다.)

[WP 팁] 워드프레스 주소/설치 폴더명을 바꾸는 방법

워드프레스를 서버에 설치시, cafe24등에서 자동셋업하면 wp이름으로 된 폴더내에 설치가 되곤 한다.
사실 그거 말고도 워드프레스 설치할때 보통 일반적으로 wp 또는 wordpress등의 이름으로 사용하는데 이럴경우 쫌...보안적으로 위험할 수 있다.
(임의로 주소를 쳐서 돌려버리니까...많이 쓰는 비번들 뚫는것처럼 주소도 마찬가지)

이미 설치가 되어있는경우 워드프레스 폴더명을 다른이름으로 바꿀수 있는 방법을 소개한다.

1. 관리자 화면접속 > 설정 > 일반 이동

2. 바꾸고자 하는 주소를 폴더명까지 기재.

워드프레스 주소 : http://주소명/바꾸고자하는폴더명
사이트 주소 : http://주소명

3. FTP등으로 접속하여 현재 설치된 폴더명을 바꾸고자하는폴더명으로 변경

4. index.php파일을 루트폴더로 복사해서 붙여넣고 파일을 에디터로 연다

5. 아래와 같이 주소를 변경한다.

/** Loads the WordPress Environment and Template */require( dirname( __FILE__ ) . ‘/바꾸고자 하는 폴더명/wp-blog-header.php’ );

6. .htaccess 파일도 마찬가지로 루트폴더에 복붙한다. 만일 파일이 보이지 않으면 숨겨진파일보기를 통해서 찾는다.

7. 고유주소를 세팅한 적이 있다면 업데이트 해야한다고 한다.(이건 나도 안해봐서 모르겠으나 참고...로)


* 사이트 : http://hellodol.ly/2014/01/17/wordpress-cafe24-wp-folder-name/ 내용을 참고
* 참고 : http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory

[WP 플러그인] 워드프레스 사이트에서 방문자 통계 확인

직접 서버에 워드프레스를 설치한 경우, 자체적으로 워드프레스에서 방문자 통계 등을 보여주는 기능이 없기 때문에 제공된 추가 플러그인을 깔아 정보를 확인한다.

대표적으로 구글 어날리틱스(Google Analytics) 플러그인을 설치할 수 있지만 디테일한 기능을 가진 만큼 느려지는 단점도 존재한다.

대시보드가 좀 느려진다면 Jetpack이라는 플러그인을 사용 하는 방법이 있다.

워드프레스닷컴 사이트(설치형이 아닌 가입형)의 통계 기능을 연결해서 사용하게끔 한다. 때문에 필요한 사항은 자신의 설치형 워드프레스 계정, Jetpack플러그인, 가입형 워드프레스닷컴의 계정이 되겠다.

통계의 경우 관리자 화면에서 방문자 추이, 일별 접속수치 등과 개별 포스트의 방문자 카운트 등을 확인가능하다.

그밖의 다른 여타 기능을 제공한다.

상세한 정보는 아래의 링크를 통해 확인하자.

* Jetpack 플러그인 다운로드 접속 페이지 : https://wordpress.org/plugins/jetpack/

* 참고한 블로그 글 및 상세 설명확인 : http://codaa.tistory.com/104

[WP 플러그인] 카테고리 출력 플러그인 : list category posts

원하는 포스트나 페이지에 카테고리 내용/리스트를 출력해주는 플러그인이다.

list category posts
https://wordpress.org/plugins/list-category-posts/

원하는 기능과 간결한 구조라서 지금까지 써본것중 가장 용이하게 잘 쓴 플러그인.
(물론 더 좋은것이 있겠지만 개인적으로 여태 워드프레스 개발했던 나날을 비교했을때..)

템플릿 지원하여 페이지 디자인 반영시 원하는데로 변경 가능.
다양한 shortcode 기능 제공.

[WP 플러그인] Media Library Assistant : 워드프레스 미디어 라이브러리 관리

Media Library Assistant : 워드프레스 미디어 라이브러리 관리 플러그인
https://wordpress.org/plugins/media-library-assistant/


현재 개발중인 워드프레스 사이트는 오픈 이후 운영시점에서 고려될 사항이 있었는데,
바로 업로드 해놓은 특정 이미지 몇가지를 따로 관리할 이슈였다.

포스팅을 위한 이미지 외에 지정 썸네일 같은거는 향후 포스팅시에도 지속적으로 써야하기 때문에 그런 이미지들만 따로 카테고리 지정해두어서 운영시에 유용하게 활용하도록 하였다.

비슷한 기능을 하는 다른 플러그인도 있었지만, 관리자>미디어 메뉴 접근 외,
직접 포스팅시 선택하는 미디어 선택창에서는 원하는 카테고리만 소팅해서 볼수 있는 컴포넌트가 없어서 패스.

Media Library Assistant 플러그인은 그밖에 여타 다양한 기능을 지원한다.

The Media Library Assistant was inspired by our work on this site. As you can see, we have hundreds of images and download files to manage and several custom taxonomies such as products, artisans, stories and Fair Trade Organizations to keep them organized.

http://fairtradejudaica.org/media-library-assistant-a-wordpress-plugin/

The Assistant allows us to see where our images and downloads appear in the site as featured images or are inserted in page and post bodies. We can quickly find attachments in a particular category or tag as we add pages and posts to the site. We can re-assign attachments to a different author and change meta data such as the attachment name/slug.

[WP 팁] Tablepress에서 페이지네이션을 넘버로 바꾸는 방법

대표적 테이블 출력 및 관리 플러그인인 Tablepress를 워드프레스에 적용하여 사용시,

하단에 출력되는 페이지네이션이 Previous, Next 버튼만 노출되어있는데

이 페이지네이션을 번호도 나오게끔 추가하는 방법이다.


/wp-content/plugins/tablepress/controllers/controller-frontend.php 를 연다.


302번째(업데이트 되면서 변할 수 있음) 줄의 아래 소스 코드에서

if ( $js_options['datatables_paginate'] ) {
    $parameters['pagingType'] = '"pagingType":"simple"';

simple -> simple_numbers 으로 변경하여 저장.

[WP 플러그인] 워드프레스에서 미디어 파일 첨부시, 한글문자를 영어 등으로 변환해주는 플러그인

워드프레스에서 미디어 파일 첨부시, 한글명으로 된 파일을 업로드 하면
실패할때가 있고 때에 따라(타 플러그인 또는 테마 연동시 등등) 페이지에 출력이 되지않는 경우가 있다.


1. 한글문자를 해시코드 형식으로 바꿔 저장하는 플러그인
http://082net.com/2012/1024/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90%EC%84%9C-%ED%95%9C%EA%B8%80-%EC%9D%B4%EB%A6%84-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C/

2. 초성,중성,종성을 영문으로 변환하여 업로드 하는 플러그인
http://ssamture.net/archives/1862


3. 한글명 파일을 제대로 업로드 할수 있게 해주는 플러그인
http://mytory.net/archives/3309/

[WP 플러그인] 워드프레스 관리자 페이지에서 DB 테이블을 직접 관리할수 있는 plugin

Database Browser

http://www.makeuseof.com/tag/working-custom-database-tables-wordpress/

[WP 팁] 워드프레스 특정 포스트ID를 통해 카테고리 값 얻는 방법

워드프레스에서 특정 포스트에 해당하는 카테고리 정보를 얻는 방법.

<?php
$category = get_the_category( $custompost );
echo $category[0]->cat_name;
?>

카테고리 ID를 얻고싶다면

$category[0]->cat_ID; 으로 지정한다.


* 참고 https://wordpress.org/support/topic/get-category-name-by-post-id

[WP 팁] 워드프레스 루트 도메인 연결

만일 wp라는 폴더에 워드프레스 설치를 하였으나,
실제 워드프레스 사이트 도메인을 wp제외 루트 접속으로 변경하고 싶다면

1. 루트 위치에 index.php를 생성하고 아래과 같이 설정한다.

<?php
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */
/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );

      ?>

2. 워드프레스 관리자 페이지 > 설정 > 사이트주소(URL)에

wp 폴더 제외 원하는 도메인을 써준다.

참고 : 워드프레스 codex 설명 - http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory

[WP 팁] 워드프레스 해당 포스트 페이지 에서 지정된 카테고리 가운데 가장 최상위 카테고리 추출

바로 상단의 카테고리는 category_parent로 가져올수 있으나,

가장 최상단의 카테고리는 아래와 같은 코드를 이용하여 추출한다.

$parentscategory ="";
foreach((get_the_category()) as $category) {
if ($category->category_parent == 0) {
$parentscategory .= $category->cat_ID .' , ';
}
}
$rootcategory_id = substr($parentscategory,0,-2);

참고 : http://www.wpbeginner.com/wp-themes/how-to-display-only-parent-category-in-your-wordpress-post-loop/

를 이용하여 재가공.

[WP 팁] 워드프레스 포스트 페이지의 해당 피쳐드 이미지 / 썸네일 주소만 추출하는 방법

get_the_post_thumbnail 함수는 썸네일 이미지 태그까지 먹힌걸로 가져오는데

여기서 이미지 경로만 추출하는 방법.



*워드프레스 포스트 피쳐드 이미지의 썸네일 주소만 추출하는 방법

$image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id(포스트id), 이미지사이즈);
$lcp_thumbnail = $image_attributes[0];

출처 : https://wordpress.org/support/topic/get_the_post_thumbnail-i-only-want-the-url

에서 참고 하여 약간 가공.