본문 바로가기
워드프레스

워드프레스 테마 뉴스페이퍼 (Newspaper) 정복기 3부

by porsche-ai 2024. 2. 11.

모든 테마들이 그렇듯이 익숙하지 않은 화면 구성으로 인해 어떻게 사용해야 할 지 처음엔 난감합니다. 워드프레스 테마 뉴스페이퍼 정복기 1부정복기 2부를 통해 셋업을 하는 기본적인 사항은 이해를 하셨으리라 생각됩니다. 뉴스페이퍼 정복기 3부에서는 실제 화면에 보이는 컨텐츠들을 변경하는 작업에 대해 설명을 하려고 합니다. 3부까지 보셨으면 그때부터는 각자의 웹사이트를 디자인하시고 구현하시면 될 것으로 판단합니다.

 

뉴스페이퍼 컨텐츠 변경

정복기 1부와 정복기 2부를 통해 작업을 했던 웹사이트로 들어갑니다.

웹사이트 화면

 

먼저 위쪽 메뉴의 'Politics'를 다른 것으로 변경해 보겠습니다.

웹사이트 메뉴

왼쪽 위의 도메인 명을 클릭하면 5가지 메뉴 리스트가 나옵니다. 이 중에서 '메뉴'를 클릭합니다.

워드프레스 외모 변경

위의 화면으로 바로 넘어가는 것을 보실 수 있습니다. 여기서 Politics를 클릭하십니다.

카테고리 메뉴 클릭 화면

위의 그림과 같이 Politics라고 되어 있는 것을 '반려견'으로 변경을 하고 '메뉴 저장' 버튼을 클릭합니다.

글의 카테고리 편집

그리고 정복기 2부에서 했던 것과 같이 글 (Post)의 카테고리로 와서 Politics를 반려견으로 변경해 줍니다.

카테고리가 변경된 웹사이트

그리고 웹사이트로 돌아오면 위의 그림과 같이 '반려견'으로 카테고리가 변경된 것을 보실 수 있습니다.

 

이제부터 본격적으로 컨텐츠 항목을 변경해 보겠습니다. 위의 화면 위쪽에서 초록색으로 보이는 'Edit with TagDiv Composer'를 클릭합니다.

TagDiv Composer 화면

위의 그림과 같이 뉴스페이퍼 테마의 플러그인인 TagDiv Composer의 화면이 나타납니다.

 

제일 먼저 해 볼것은 화면에 'NEW YORK'의 날씨를 나타내고 있는데 이것을 한국의 날씨로 변경하는 작업입니다.

위의 화면에서 조금만 아래로 스크롤을 해보시면 아래의 그림과 같이 NEW YORK 날씨를 보여주는 컨텐츠를 보실 수 있습니다.

뉴욕날씨 컨텐츠

뉴욕날씨 컨텐츠를 클릭해 보면 아래와 같습니다.

뉴욕 날씨를 서울로 변경

왼쪽 중간에 'Location'에 'New York'으로 되어 있습니다.

서울로 변경

위의 그림과 같이 'New York'을 'Seoul, KR'로 변경해 주면 오른쪽도 서울의 날씨로 변경됨을 보실 수 있습니다.

그리고 가장 중요한 항목인 왼쪽 제일 위에 있는 'Save' 버튼을 눌러줍니다. 저장을 안 하면 Composer 화면에서만 변경이 되고 웹사이트에는 반영이 되지 않습니다.

이것이 웹사이트에 잘 반영되었는지 확인하기 위해 'Save' 버튼 옆의 'View' 버튼을 누릅니다.

서울로 변경된 웹사이트

위의 그림과 같이 웹사이트에 서울로 변경이 되어 반영 되었습니다.

다음의 단계로는 몇 가지 항목들을 삭제를 해 보겠습니다.

Composer 화면

다시 Composer 화면으로 돌아와서 오른쪽 박스의 항목들을 삭제를 하겠습니다.

소셜 카운터 삭제

소셜 카운터를 삭제하려고 하면 오른쪽 아래의 빨간 박스 (Drop here to DELETE)가 나오고 여기에 항목을 끌어다 주면 삭제가 됩니다.

삭제 버튼 사용

삭제를 하는 다른 방법은 오른쪽 화살표에 있는 '휴지통' 버튼을 사용하는 것입니다.

삭제된 항목 확인

위의 그림과 같이 'Life' 옆에 있던 항목들이 삭제되었음을 웹사이트를 방문해 보면 확인하실 수 있습니다.

 

다음 단계는 없는 항목을 추가해 보는 것입니다.

다시 TagDiv Composer 화면으로 들어갑니다.

TagDiv Composer 화면

위의 그림과 같이 들어오셨으면 'Add Element'화면을 누릅니다.

Composer에서 항목 추가 메뉴

위의 그림과 같이 추가할 수 있는 항목들을 리스트로 보실 수 있습니다.

항목 추가

주황색 박스에 있는 'Social Share'를 Life 옆의 빈 공간에 추가해 보겠습니다.

항목 추가 예시

'Social Share'를 드래그앤드롭으로 빈 위치에 놓으면 위의 그림과 같이 변경된 것을 보실 수 있습니다. 그리고 아까도 언급했듯이 반드시 'Save' 버튼을 누르시고 확인을 위해 'View' 버튼을 눌러 봅니다.

반영된 결과 화면

그럼 위의 그림과 같이 'Life' 항목 옆에 우리가 넣은 'Social Share' 가 나타나는 것을 보실 수 있습니다.

 

위와 같이 Prebuild Website의 항목들을 조금씩 변형해 가면서 우리만의 독특한 웹사이트를 만들어 보면 되겠습니다.

 

 

사진 사이즈 줄이는 법

웹사이트의 디자인을 하시고 나면 그 다음엔 실제 글들을 올리시면 됩니다. 여기서 사진등도 같이 올리시는데 사진의 사이즈가 크면 로딩하는데 시간이 많이 걸려 독자들이 기다리지 못하고 나가는 경우가 많다고 합니다. 이것을 해결하기 위해 각각의 사진 사이즈를 줄여야 합니다. 방법은 여러가지가 있습니다. 저는 2가지 방법을 병행합니다.

마이크로소프트 파워포인트 사용

사이즈가 큰 사진을 마이크로소프트 파워포인트 페이지에 복사를 해 넣습니다. 그리고 '다른 이름으로 저장'을 하게 되면 메가바이트 단위의 사진들도 킬로바이트로 줄어들게 됩니다. 이 방법은 인터넷 연결이 안 되었을때 사진을 일단 줄이는 작업을 하고자 할때 사용하시면 유용할 것으로 생각됩니다.

TinyPNG 사이트 이용

TinyPNG 사이트를 이용하시면 정말 편리하게 사진의 사이즈를 줄이실 수 있습니다. 웹 사이트에 원하는 파일을 드래그앤드롭으로 가져다 놓으면 사이즈가 줄어들게 되어 있습니다. 앞서 말씀드렸던 파워포인트 사용을 한 후에도 사이즈가 500킬로바이트 이상이라면 이 사이트를 사용하시는 것이 좋습니다.

탐색기 화면에서 사이즈가 커서 줄여야 하는 파일이 있는지 살펴봅니다.

탐색기에서 사이즈 큰 파일 찾기

제일 아래 보이는 파일의 사이즈가 500킬로바이트가 넘었습니다.

그럼 아래의 화면과 같이 TinyPNG 사이트로 방문하십니다.

TinyPNG 사이트

중간을 보시면 'Drop your images here!'라는 공간이 보입니다. 여기에 원하는 파일을 가져다 놓습니다.

사이즈 줄인 결과

사진을 가져다 놓음과 동시에 자동으로 줄이는 작업이 시작되고 하단과 같이 -74%를 줄여서 134킬로바이트가 되었다고 나옵니다. 옆의 'PNG'라는 아이콘을 누르시면 '다운로드' 폴더안에 해당 파일이 저장됩니다.

줄어든 파일

화살표를 보시면 알수 있듯이 511킬로바이트 파일이 134킬로바이트로 줄어들어 있습니다. 이렇게 파일 사이즈를 줄여서 블로그 등에 포스트 하시면 빠른 속도의 웹사이트를 관리하실 수 있습니다.