[워드프레스] 테이블 프레스 Table Press 플러그인 사용 중 모바일 환경에서 표 값에 preview, product, price라는 알 수 없는 값이 나올 경우 해결방법

현재 진행 중인 홈페이지 개발 프로젝트이다.

 

워드프레스 프레임워크를 사용 중이며, 표를 만들기 위해 tablepress 플러그인을 사용하고 있다.

 

문제 해결방법을 찾기 위하여 해당 플러그인의 API를 검색해보고 외국인들의 질의응답도 분석해보았지만 답이 나오지 않았다.

 

하지만 해결방법은 매우 간단했다.

 

이 것을 보면 금방 해결할 수 있으니 참고하면 된다.

 

문제는 다음과 같다.

 

 

웹 상에서는 문제가 없어보인다. 하지만..

 

ctrl + shift + tab을 눌러서 모바일 디바이스에서는 어떻게 반응을 하는지 살펴보았다.

 

웹 상에서는 없었던 Preview, Product 라는 내용이 보이는가? 종합정밀점검 부분은 내용 앞에 Price가 추가되어 있다.

 

td.column-1::before이라는 위치의 css 파일을 살펴보아야 한다.

 

<td class="column-1>

코드를 살펴보니 예상대로 ::before 이라는 알 수 없는 코드가 기입되어 있었다.

 

 

더 자세히 살펴보자.

 

오른쪽 상단의 빨간박스로 표시된 css 부분을 보면

 

type(1):before {

    content: "Preview";

}

 

라는 알 수 없는 코드가 기입되어 있다.

 

문제 해결 방법은 간단하다.

 

.tablepress td.column-1::before {
	content: "";
}

content의 내용을 공백으로 만들면 된다.

TablePress의 플러그인을 찾아서 플러그인 옵션을 수정해주자.

.tablepress td.column-1::before {
	content: "";
}

.tablepress td.column-2::before {
	content: "";
}

.tablepress td.column-3::before {
	content: "";
}

나는 열의 3부분 전부, content 키 값에 preview, product, price라는 알 수 없는 값이 할당되어 있었기에 다음과 같이 기입을 하였다.

 

소스코드를 기입하고, 저장하면 마무리 된다.

 

빨간 박스를 차례대로 살펴보자.

 

content의 값이 공백으로 처리되었다.

 

tablepress 플러그인을 사용 중 모바일 디바이스 상에서 이상한 값이 들어가있는 코드를 수정하는 작업을 하였다.

 

도움이 되길 바란다.