[워드프레스 테마] GeneratePress에서 브레드크럼 수정, 꾸미기

워드프레스 테마 중 generatepress 를 사용하는 분들을 위한 내용임을 먼저 알려드립니다.
브레드크럼 적용하는 방법은 지난 포스팅에서 이미 다뤘습니다.

수정 전 모습

지난 포스팅에서 적용한 브레드크럼 모습 입니다. 문제없이 잘 적용되고 있습니다. 하지만 브레드크럼에 css 디자인을 살짝 넣으면 색다른 느낌으로 표현할 수 있습니다. 

수정 후 모습

큰 변화는 없지만 중요한 것은 엘리먼트 후크로 적용할 때 쇼컷 코드만 가능 한게 아니라 css 코드를 적용할 수 있다는 것을 알게되었다는 것이 더 큰 성과였습니다. css 디자인이 가능하다는 것을 알았으니 본인이 원하는 대로 수정하면 됩니다.

브레드크럼 수정에 사용된 코드

아래 코드 중 4번째 줄 border-color: # 에서 원하는 색상을 넣어 주면 됩니다. # 뒤에 넣는 것이 칼라이니 하나씩 변경해 보면 감이 올거에요.

제목이 길면 브레드크럼 줄바꿈이 되어 이쁘게 안보입니다. 저 같은 경우는 폰트사이즈를 12pt로 줄여서 사용하고 있습니다. 폰트 사이즈 조정은 아래 코드 6번째 줄 font: 15pt => 수정해 주면 됩니다.

사용된 코드는 아래 text 파일을 다운 받으세요. 아직 워드프레스 고전편집기 사용할때 코드삽입 하는 방법을 익히지 못해 아래와 같이 공유합니다. 필요하신 분들은 다운받으세요. >> code